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.sessions.tsx

@@ -0,0 +1,58 @@
+import { PageContainer } from '@/components/page-container';
+import { PageHeader } from '@/components/page-header';
+import { SessionsTable } from '@/components/sessions/table';
+import { useSearchQueryState } from '@/hooks/use-search-query-state';
+import { useTRPC } from '@/integrations/trpc/react';
+import { PAGE_TITLES, createProjectTitle } from '@/utils/title';
+import {
+  keepPreviousData,
+  useInfiniteQuery,
+  useQuery,
+} from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { parseAsString, parseAsStringEnum, useQueryState } from 'nuqs';
+
+export const Route = createFileRoute(
+  '/_app/$organizationId/$projectId/sessions',
+)({
+  component: Component,
+  head: () => {
+    return {
+      meta: [
+        {
+          title: createProjectTitle(PAGE_TITLES.SESSIONS),
+        },
+      ],
+    };
+  },
+});
+
+function Component() {
+  const { projectId } = Route.useParams();
+  const trpc = useTRPC();
+  const { debouncedSearch } = useSearchQueryState();
+
+  const query = useInfiniteQuery(
+    trpc.session.list.infiniteQueryOptions(
+      {
+        projectId,
+        take: 50,
+        search: debouncedSearch,
+      },
+      {
+        getNextPageParam: (lastPage) => lastPage.meta.next,
+      },
+    ),
+  );
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Sessions"
+        description="Access all your sessions here"
+        className="mb-8"
+      />
+      <SessionsTable query={query} />
+    </PageContainer>
+  );
+}