feat: new billing and restrict access when trial has ended

* fix: simply billing

* fix usage graph

* imporve billing more + supporter prompt on self-hosting

* revert service change

* revert query builder

* fix: comments

apps/start/src/routes/_app.$organizationId.$projectId.notifications._tabs.tsx

@@ -0,0 +1,61 @@
+import { PageHeader } from '@/components/page-header';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { usePageTabs } from '@/hooks/use-page-tabs';
+import { PAGE_TITLES, createProjectTitle } from '@/utils/title';
+import { Outlet, createFileRoute, useRouter } from '@tanstack/react-router';
+
+export const Route = createFileRoute(
+  '/_app/$organizationId/$projectId/notifications/_tabs',
+)({
+  component: Component,
+  head: () => {
+    return {
+      meta: [
+        {
+          title: createProjectTitle(PAGE_TITLES.NOTIFICATIONS),
+        },
+      ],
+    };
+  },
+});
+
+function Component() {
+  const router = useRouter();
+
+  const { activeTab, tabs } = usePageTabs([
+    { id: 'notifications', label: 'Notifications' },
+    { id: 'rules', label: 'Rules' },
+  ]);
+
+  const handleTabChange = (tabId: string) => {
+    console.log('tabId', tabId, tabs[0].id === tabId);
+    router.navigate({
+      from: Route.fullPath,
+      to: tabId,
+    });
+  };
+
+  return (
+    <div className="container p-8">
+      <PageHeader
+        title="Notifications"
+        description="See notifications and manage your rules when to get notifications"
+      />
+
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="mt-2 mb-8"
+      >
+        <TabsList>
+          {tabs.map((tab) => (
+            <TabsTrigger key={tab.id} value={tab.id}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+      <Outlet />
+    </div>
+  );
+}