diff --git a/src/api/billing.ts b/src/api/billing.ts
index a5be30fc23..c18e5533cf 100644
--- a/src/api/billing.ts
+++ b/src/api/billing.ts
@@ -2,9 +2,7 @@ import type { TenantPaymentDetails } from 'src/types';
 
 import pLimit from 'p-limit';
 
-import { supabaseClient } from 'src/context/GlobalProviders';
-import { FUNCTIONS, invokeSupabase, TABLES } from 'src/services/supabase';
-import { formatDateForApi } from 'src/utils/billing-utils';
+import { FUNCTIONS, invokeSupabase } from 'src/services/supabase';
 
 const OPERATIONS = {
     SETUP_INTENT: 'setup-intent',
@@ -90,41 +88,6 @@ export interface Invoice {
     };
 }
 
-const invoicesQuery = [
-    'billed_prefix',
-    'date_start',
-    'date_end',
-    'line_items',
-    'subtotal',
-    'invoice_type',
-    'extra',
-].join(', ');
-
-export const getInvoicesBetween = (
-    billed_prefix: string,
-    date_start: Date,
-    date_end: Date
-) => {
-    const formattedStart = formatDateForApi(date_start);
-    const formattedEnd = formatDateForApi(date_end);
-
-    return supabaseClient
-        .from(TABLES.INVOICES_EXT)
-        .select(invoicesQuery)
-        .filter('billed_prefix', 'eq', billed_prefix)
-        .or(
-            `invoice_type.eq.manual,and(${[
-                `date_start.gte.${formattedStart}`,
-                `date_start.lte.${formattedEnd}`,
-                `date_end.gte.${formattedStart}`,
-                `date_end.lte.${formattedEnd}`,
-            ].join(',')})`
-        )
-        .order('date_start', { ascending: false })
-        .throwOnError()
-        .returns<Invoice[]>();
-};
-
 export interface MultiplePaymentMethods {
     responses: any[];
     errors: any[];
diff --git a/src/api/gql/billing.ts b/src/api/gql/billing.ts
new file mode 100644
index 0000000000..0e98929413
--- /dev/null
+++ b/src/api/gql/billing.ts
@@ -0,0 +1,29 @@
+import { graphql } from 'src/gql-types';
+
+// Upper bound on invoices fetched per tenant. A tenant accrues ~12 invoices a
+// year, so this comfortably covers the rolling six-month window the UI shows
+// plus any older manual invoices, which the hook filters down client-side.
+export const BILLING_INVOICE_FETCH_LIMIT = 100;
+
+// `lineItems` and `extra` are opaque JSON scalars in the schema, so codegen
+// types them as `unknown`; the hook casts them to the InvoiceLineItem[] / extra
+// shapes the rest of the billing UI already expects. `billed_prefix` is not on
+// the node because the tenant is implied by the `tenant(name:)` parent.
+export const TENANT_BILLING_INVOICES_QUERY = graphql(`
+    query TenantBillingInvoices($tenant: String!, $first: Int) {
+        tenant(name: $tenant) {
+            billing {
+                invoices(first: $first) {
+                    nodes {
+                        dateStart
+                        dateEnd
+                        invoiceType
+                        subtotal
+                        lineItems
+                        extra
+                    }
+                }
+            }
+        }
+    }
+`);
diff --git a/src/components/admin/Billing/LoadError.tsx b/src/components/admin/Billing/LoadError.tsx
index 630fb98d4c..34a430006d 100644
--- a/src/components/admin/Billing/LoadError.tsx
+++ b/src/components/admin/Billing/LoadError.tsx
@@ -3,14 +3,12 @@ import { Grid } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 
 import AlertBox from 'src/components/shared/AlertBox';
-import { useBillingStore } from 'src/stores/Billing';
+import { useBillingInvoices } from 'src/hooks/billing/useBillingInvoices';
 
 function BillingLoadError() {
-    const hydrationErrorsExist = useBillingStore(
-        (state) => state.hydrationErrorsExist
-    );
+    const { errorExists } = useBillingInvoices();
 
-    if (!hydrationErrorsExist) {
+    if (!errorExists) {
         return null;
     }
 
diff --git a/src/components/admin/Billing/PricingTierDetails.tsx b/src/components/admin/Billing/PricingTierDetails.tsx
index 20db091910..8102906886 100644
--- a/src/components/admin/Billing/PricingTierDetails.tsx
+++ b/src/components/admin/Billing/PricingTierDetails.tsx
@@ -13,7 +13,6 @@ function PricingTierDetails() {
     const [externalPaymentMethod, marketPlaceProvider] =
         useTenantUsesExternalPayment(selectedTenant);
 
-    const billingStoreHydrated = useBillingStore((state) => state.hydrated);
     const paymentMethodExists = useBillingStore(
         (state) => state.paymentMethodExists
     );
@@ -38,7 +37,7 @@ function PricingTierDetails() {
         return 'admin.billing.message.freeTier';
     }, [externalPaymentMethod, marketPlaceProvider, paymentMethodExists]);
 
-    if (!billingStoreHydrated || typeof paymentMethodExists !== 'boolean') {
+    if (typeof paymentMethodExists !== 'boolean') {
         return (
             <Skeleton>
                 <Typography>
diff --git a/src/components/admin/Billing/TenantOptions.tsx b/src/components/admin/Billing/TenantOptions.tsx
index 17466aaa7a..54d6599057 100644
--- a/src/components/admin/Billing/TenantOptions.tsx
+++ b/src/components/admin/Billing/TenantOptions.tsx
@@ -1,16 +1,7 @@
-import { useCallback } from 'react';
-
 import TenantSelector from 'src/components/shared/TenantSelector';
-import { useBillingStore } from 'src/stores/Billing';
 
 function TenantOptions() {
-    const resetBillingState = useBillingStore((state) => state.resetState);
-
-    const updateStoreState = useCallback(() => {
-        resetBillingState();
-    }, [resetBillingState]);
-
-    return <TenantSelector updateStoreState={updateStoreState} />;
+    return <TenantSelector />;
 }
 
 export default TenantOptions;
diff --git a/src/components/admin/Billing/index.tsx b/src/components/admin/Billing/index.tsx
index 4e2892fc40..3c0b8e8cb9 100644
--- a/src/components/admin/Billing/index.tsx
+++ b/src/components/admin/Billing/index.tsx
@@ -1,18 +1,10 @@
 import type { AdminBillingProps } from 'src/components/admin/Billing/types';
 
-import { useEffect, useMemo } from 'react';
-import useConstant from 'use-constant';
-
 import { Divider, Grid, Typography } from '@mui/material';
 
-import { useShallow } from 'zustand/react/shallow';
-
-import { endOfMonth, startOfMonth, subMonths } from 'date-fns';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useIntl } from 'react-intl';
-import { useUnmount } from 'react-use';
 
-import { getInvoicesBetween } from 'src/api/billing';
 import { authenticatedRoutes } from 'src/app/routes';
 import DateRange from 'src/components/admin/Billing/DateRange';
 import BillingLoadError from 'src/components/admin/Billing/LoadError';
@@ -28,14 +20,10 @@ import AlertBox from 'src/components/shared/AlertBox';
 import CardWrapper from 'src/components/shared/CardWrapper';
 import BillingHistoryTable from 'src/components/tables/Billing';
 import BillingLineItemsTable from 'src/components/tables/BillLineItems';
+import { useBillingInvoices } from 'src/hooks/billing/useBillingInvoices';
 import usePageTitle from 'src/hooks/usePageTitle';
 import { logRocketEvent } from 'src/services/shared';
 import { CustomEvents } from 'src/services/types';
-import {
-    useBilling_selectedInvoice,
-    useBillingStore,
-} from 'src/stores/Billing';
-import { useTenantStore } from 'src/stores/Tenant';
 import { invoiceId, TOTAL_CARD_HEIGHT } from 'src/utils/billing-utils';
 
 const routeTitle = authenticatedRoutes.admin.billing.title;
@@ -52,79 +40,7 @@ function AdminBilling({ showAddPayment }: AdminBillingProps) {
 
     const intl = useIntl();
 
-    const selectedTenant = useTenantStore((state) => state.selectedTenant);
-
-    // Billing Store
-    // TODO (billing store)
-    // The `active` stuff could probably be removed now that other stuff is
-    //  cleaned up - but leaving to make it easier
-    const [active, setActive] = useBillingStore(
-        useShallow((state) => [state.active, state.setActive])
-    );
-    const [hydrated, setHydrated] = useBillingStore(
-        useShallow((state) => [state.hydrated, state.setHydrated])
-    );
-    const setHydrationErrorsExist = useBillingStore(
-        (state) => state.setHydrationErrorsExist
-    );
-    const setInvoices = useBillingStore((state) => state.setInvoices);
-    const setNetworkFailed = useBillingStore((state) => state.setNetworkFailed);
-
-    const selectedInvoice = useBilling_selectedInvoice();
-
-    const resetBillingState = useBillingStore((state) => state.resetState);
-
-    const currentMonth = useConstant(() => {
-        const today = new Date();
-
-        return endOfMonth(today);
-    });
-
-    const dateRange = useMemo(() => {
-        const startMonth = startOfMonth(subMonths(currentMonth, 5));
-
-        return { start: startMonth, end: currentMonth };
-    }, [currentMonth]);
-
-    useEffect(() => {
-        if (selectedTenant) {
-            void (async () => {
-                setNetworkFailed(null);
-                setActive(true);
-                try {
-                    const response = await getInvoicesBetween(
-                        selectedTenant,
-                        dateRange.start,
-                        dateRange.end
-                    );
-                    if (response.error) {
-                        throw new Error(response.error.message);
-                    }
-                    setNetworkFailed(null);
-                    setHydrationErrorsExist(false);
-                    setInvoices(response.data);
-                } catch (errorMessage: unknown) {
-                    setNetworkFailed(`${errorMessage}`);
-                    setHydrationErrorsExist(true);
-                    setInvoices([]);
-                } finally {
-                    setHydrated(true);
-                    setActive(false);
-                }
-            })();
-        }
-    }, [
-        dateRange.end,
-        dateRange.start,
-        selectedTenant,
-        setActive,
-        setHydrated,
-        setHydrationErrorsExist,
-        setInvoices,
-        setNetworkFailed,
-    ]);
-
-    useUnmount(() => resetBillingState());
+    const { isLoading, selectedInvoice } = useBillingInvoices();
 
     return (
         <>
@@ -178,7 +94,7 @@ function AdminBilling({ showAddPayment }: AdminBillingProps) {
                     <CardWrapper
                         height={invoiceCardHeight}
                         message={
-                            active || !hydrated ? (
+                            isLoading ? (
                                 intl.formatMessage({
                                     id: 'admin.billing.label.lineItems.loading',
                                 })
@@ -199,7 +115,7 @@ function AdminBilling({ showAddPayment }: AdminBillingProps) {
                             )
                         }
                     >
-                        {!active && hydrated ? (
+                        {!isLoading ? (
                             <BillingLineItemsTable
                                 // The key here makes sure that any stateful fetching logic doesn't get confused.
                                 key={
diff --git a/src/components/graphs/TaskHoursByMonthGraph.tsx b/src/components/graphs/TaskHoursByMonthGraph.tsx
index 581c0539c2..d53e769a95 100644
--- a/src/components/graphs/TaskHoursByMonthGraph.tsx
+++ b/src/components/graphs/TaskHoursByMonthGraph.tsx
@@ -29,7 +29,7 @@ import {
 } from 'src/components/graphs/tooltips';
 import useTooltipConfig from 'src/components/graphs/useTooltipConfig';
 import { defaultOutlineColor } from 'src/context/Theme';
-import { useBillingStore } from 'src/stores/Billing';
+import { useBillingInvoices } from 'src/hooks/billing/useBillingInvoices';
 import { CARD_AREA_HEIGHT, stripTimeFromDate } from 'src/utils/billing-utils';
 
 const chartContainerId = 'task-hours-by-month';
@@ -39,8 +39,7 @@ function TaskHoursByMonthGraph() {
     const intl = useIntl();
     const tooltipConfig = useTooltipConfig();
 
-    const billingStoreHydrated = useBillingStore((state) => state.hydrated);
-    const invoices = useBillingStore((state) => state.invoices);
+    const { invoices, isLoading } = useBillingInvoices();
 
     const resizeListener = useRef<EventListener | null>(null);
     const [myChart, setMyChart] = useState<echarts.ECharts | null>(null);
@@ -85,7 +84,7 @@ function TaskHoursByMonthGraph() {
     }, [invoices, intl, today]);
 
     useEffect(() => {
-        if (billingStoreHydrated && invoices.length > 0) {
+        if (!isLoading && invoices.length > 0) {
             if (!myChart) {
                 echarts.use([
                     GridComponent,
@@ -190,7 +189,7 @@ function TaskHoursByMonthGraph() {
         }
     }, [
         invoices,
-        billingStoreHydrated,
+        isLoading,
         intl,
         months,
         myChart,
diff --git a/src/components/graphs/UsageByMonthGraph.tsx b/src/components/graphs/UsageByMonthGraph.tsx
index 0de4754ab3..20d6624c4a 100644
--- a/src/components/graphs/UsageByMonthGraph.tsx
+++ b/src/components/graphs/UsageByMonthGraph.tsx
@@ -27,7 +27,7 @@ import { useIntl } from 'react-intl';
 import useLegendConfig from 'src/components/graphs/useLegendConfig';
 import useTooltipConfig from 'src/components/graphs/useTooltipConfig';
 import { eChartsColors } from 'src/context/Theme';
-import { useBillingStore } from 'src/stores/Billing';
+import { useBillingInvoices } from 'src/hooks/billing/useBillingInvoices';
 import { CARD_AREA_HEIGHT, stripTimeFromDate } from 'src/utils/billing-utils';
 
 const chartContainerId = 'data-by-month';
@@ -40,8 +40,7 @@ function UsageByMonthGraph() {
     const tooltipConfig = useTooltipConfig();
     const legendConfig = useLegendConfig([{ name: 'Data' }, { name: 'Hours' }]);
 
-    const billingStoreHydrated = useBillingStore((state) => state.hydrated);
-    const invoices = useBillingStore((state) => state.invoices);
+    const { invoices, isLoading } = useBillingInvoices();
 
     const [myChart, setMyChart] = useState<echarts.ECharts | null>(null);
 
@@ -96,7 +95,7 @@ function UsageByMonthGraph() {
     }, [invoices, intl, today]);
 
     useEffect(() => {
-        if (billingStoreHydrated && invoices.length > 0) {
+        if (!isLoading && invoices.length > 0) {
             if (!myChart) {
                 echarts.use([
                     GridComponent,
@@ -126,7 +125,7 @@ function UsageByMonthGraph() {
         return undefined;
     }, [
         invoices,
-        billingStoreHydrated,
+        isLoading,
         intl,
         legendConfig,
         months,
diff --git a/src/components/graphs/states/Wrapper.tsx b/src/components/graphs/states/Wrapper.tsx
index 00693b82a2..f81e410f4e 100644
--- a/src/components/graphs/states/Wrapper.tsx
+++ b/src/components/graphs/states/Wrapper.tsx
@@ -7,14 +7,15 @@ import { FormattedMessage } from 'react-intl';
 import EmptyGraphState from 'src/components/graphs/states/Empty';
 import GraphLoadingState from 'src/components/graphs/states/Loading';
 import { eChartsTooltipSX } from 'src/components/graphs/tooltips';
-import { useBillingStore } from 'src/stores/Billing';
+import { useBillingInvoices } from 'src/hooks/billing/useBillingInvoices';
 import { hasLength } from 'src/utils/misc-utils';
 
 function GraphStateWrapper({ children }: BaseComponentProps) {
-    const billingStoreActive = useBillingStore((state) => state.active);
-    const billingStoreHydrated = useBillingStore((state) => state.hydrated);
-    const networkFailed = useBillingStore((state) => state.networkFailed);
-    const billingHistory = useBillingStore((state) => state.invoices);
+    const {
+        invoices: billingHistory,
+        isLoading,
+        networkFailed,
+    } = useBillingInvoices();
 
     if (networkFailed) {
         return (
@@ -29,7 +30,7 @@ function GraphStateWrapper({ children }: BaseComponentProps) {
         );
     }
 
-    if (!billingStoreActive && billingStoreHydrated) {
+    if (!isLoading) {
         return hasLength(billingHistory) ? (
             <Box sx={eChartsTooltipSX}>{children}</Box>
         ) : (
diff --git a/src/components/tables/BillLineItems/index.tsx b/src/components/tables/BillLineItems/index.tsx
index 5c1dcbce40..69ed0244ac 100644
--- a/src/components/tables/BillLineItems/index.tsx
+++ b/src/components/tables/BillLineItems/index.tsx
@@ -22,10 +22,7 @@ import TotalLines from 'src/components/tables/BillLineItems/TotalLines';
 import EntityTableBody from 'src/components/tables/EntityTable/TableBody';
 import EntityTableHeader from 'src/components/tables/EntityTable/TableHeader';
 import { getTableHeaderWithoutHeaderColor } from 'src/context/Theme';
-import {
-    useBilling_selectedInvoice,
-    useBillingStore,
-} from 'src/stores/Billing';
+import { useBillingInvoices } from 'src/hooks/billing/useBillingInvoices';
 import { useTenantStore } from 'src/stores/Tenant';
 import { TableStatuses } from 'src/types';
 
@@ -57,10 +54,7 @@ function BillingLineItemsTable() {
 
     const selectedTenant = useTenantStore((state) => state.selectedTenant);
 
-    const selectedInvoice = useBilling_selectedInvoice();
-
-    const hydrated = useBillingStore((state) => state.hydrated);
-    const invoices = useBillingStore((state) => state.invoices);
+    const { invoices, selectedInvoice, isLoading } = useBillingInvoices();
 
     const dataRows = useMemo(
         () => <Rows lineItems={selectedInvoice?.line_items ?? []} />,
@@ -120,7 +114,7 @@ function BillingLineItemsTable() {
                                 ? { status: TableStatuses.DATA_FETCHED }
                                 : { status: TableStatuses.NO_EXISTING_DATA }
                         }
-                        loading={!hydrated}
+                        loading={isLoading}
                         rows={dataRows}
                     />
                 </Table>
@@ -135,7 +129,7 @@ function BillingLineItemsTable() {
                 }}
             >
                 {selectedInvoice?.invoice_type !== 'preview' ? (
-                    hydrated ? (
+                    !isLoading ? (
                         <Box>
                             <Button
                                 href={stripeInvoice?.invoice_pdf}
diff --git a/src/components/tables/Billing/index.tsx b/src/components/tables/Billing/index.tsx
index 1f7b69a9fd..4b01a9d3c9 100644
--- a/src/components/tables/Billing/index.tsx
+++ b/src/components/tables/Billing/index.tsx
@@ -10,10 +10,7 @@ import Rows from 'src/components/tables/Billing/Rows';
 import EntityTableBody from 'src/components/tables/EntityTable/TableBody';
 import EntityTableHeader from 'src/components/tables/EntityTable/TableHeader';
 import { getTableHeaderWithoutHeaderColor } from 'src/context/Theme';
-import {
-    useBilling_selectedInvoice,
-    useBillingStore,
-} from 'src/stores/Billing';
+import { useBillingInvoices } from 'src/hooks/billing/useBillingInvoices';
 import { TableStatuses } from 'src/types';
 import { invoiceId } from 'src/utils/billing-utils';
 
@@ -46,12 +43,12 @@ export const columns: TableColumns[] = [
 function BillingHistoryTable() {
     const intl = useIntl();
 
-    const selectedInvoice = useBilling_selectedInvoice();
-
-    const active = useBillingStore((state) => state.active);
-    const hydrated = useBillingStore((state) => state.hydrated);
-    const networkFailed = useBillingStore((state) => state.networkFailed);
-    const billingHistory = useBillingStore((state) => state.invoices);
+    const {
+        invoices: billingHistory,
+        selectedInvoice,
+        isLoading,
+        networkFailed,
+    } = useBillingInvoices();
 
     const dataRows = useMemo(
         () =>
@@ -95,7 +92,7 @@ function BillingHistoryTable() {
                               ? { status: TableStatuses.NETWORK_FAILED }
                               : { status: TableStatuses.NO_EXISTING_DATA }
                     }
-                    loading={Boolean(active || !hydrated)}
+                    loading={isLoading}
                     rows={dataRows}
                 />
             </Table>
diff --git a/src/context/URQL.tsx b/src/context/URQL.tsx
index 9974f78c38..c2a6bc7397 100644
--- a/src/context/URQL.tsx
+++ b/src/context/URQL.tsx
@@ -63,6 +63,9 @@ function UrqlConfigProvider({ children }: BaseComponentProps) {
                         RefreshTokenInfo: (_data) => null,
                         StorageMapping: (data) => null,
                         DataPlane: (data) => null,
+                        Tenant: (_data) => null,
+                        TenantBilling: (_data) => null,
+                        Invoice: (_data) => null,
                     },
                     updates: {
                         Mutation: {
diff --git a/src/gql-types/gql.ts b/src/gql-types/gql.ts
index f3bf218a46..8aa7617f72 100644
--- a/src/gql-types/gql.ts
+++ b/src/gql-types/gql.ts
@@ -19,6 +19,7 @@ type Documents = {
     "\n    query AlertSubscriptions($prefix: Prefix!) {\n        alertSubscriptions(by: { prefix: $prefix }) {\n            alertTypes\n            catalogPrefix\n            email\n            updatedAt\n        }\n    }\n": typeof types.AlertSubscriptionsDocument,
     "\n    mutation UpdateAlertSubscriptionMutation(\n        $prefix: Prefix!\n        $email: String!\n        $alertTypes: [AlertType!]\n        $detail: String\n    ) {\n        updateAlertSubscription(\n            prefix: $prefix\n            email: $email\n            alertTypes: $alertTypes\n            detail: $detail\n        ) {\n            catalogPrefix\n            email\n        }\n    }\n": typeof types.UpdateAlertSubscriptionMutationDocument,
     "\n    query AlertType {\n        alertTypes {\n            alertType\n            description\n            displayName\n            isDefault\n            isSystem\n        }\n    }\n": typeof types.AlertTypeDocument,
+    "\n    query TenantBillingInvoices($tenant: String!, $first: Int) {\n        tenant(name: $tenant) {\n            billing {\n                invoices(first: $first) {\n                    nodes {\n                        dateStart\n                        dateEnd\n                        invoiceType\n                        subtotal\n                        lineItems\n                        extra\n                    }\n                }\n            }\n        }\n    }\n": typeof types.TenantBillingInvoicesDocument,
     "\n    query ConnectorsGrid($filter: ConnectorsFilter, $after: String) {\n        connectors(first: 500, after: $after, filter: $filter) {\n            edges {\n                cursor\n                node {\n                    id\n                    imageName\n                    logoUrl\n                    title\n                    recommended\n                    detail\n                    defaultSpec {\n                        id\n                        imageTag\n                        documentationUrl\n                        protocol\n                    }\n                }\n            }\n            pageInfo {\n                hasNextPage\n                endCursor\n            }\n        }\n    }\n": typeof types.ConnectorsGridDocument,
     "\n    query ConnectorTagData($imageName: String!, $fullImageName: String!) {\n        connector(imageName: $imageName) {\n            id\n            imageName\n            logoUrl\n            title\n        }\n        connectorSpec(fullImageName: $fullImageName) {\n            id\n            imageTag\n            defaultCaptureInterval\n            disableBackfill\n            documentationUrl\n            endpointSpecSchema\n            resourceSpecSchema\n            protocol\n        }\n    }\n": typeof types.ConnectorTagDataDocument,
     "\n    query DataPlanes($after: String) {\n        dataPlanes(first: 100, after: $after) {\n            edges {\n                node {\n                    name\n                    cloudProvider\n                    region\n                    isPublic\n                    fqdn\n                    cidrBlocks\n                    awsIamUserArn\n                    gcpServiceAccountEmail\n                    azureApplicationClientId\n                    azureApplicationName\n                }\n            }\n            pageInfo {\n                hasNextPage\n                endCursor\n            }\n        }\n    }\n": typeof types.DataPlanesDocument,
@@ -47,6 +48,7 @@ const documents: Documents = {
     "\n    query AlertSubscriptions($prefix: Prefix!) {\n        alertSubscriptions(by: { prefix: $prefix }) {\n            alertTypes\n            catalogPrefix\n            email\n            updatedAt\n        }\n    }\n": types.AlertSubscriptionsDocument,
     "\n    mutation UpdateAlertSubscriptionMutation(\n        $prefix: Prefix!\n        $email: String!\n        $alertTypes: [AlertType!]\n        $detail: String\n    ) {\n        updateAlertSubscription(\n            prefix: $prefix\n            email: $email\n            alertTypes: $alertTypes\n            detail: $detail\n        ) {\n            catalogPrefix\n            email\n        }\n    }\n": types.UpdateAlertSubscriptionMutationDocument,
     "\n    query AlertType {\n        alertTypes {\n            alertType\n            description\n            displayName\n            isDefault\n            isSystem\n        }\n    }\n": types.AlertTypeDocument,
+    "\n    query TenantBillingInvoices($tenant: String!, $first: Int) {\n        tenant(name: $tenant) {\n            billing {\n                invoices(first: $first) {\n                    nodes {\n                        dateStart\n                        dateEnd\n                        invoiceType\n                        subtotal\n                        lineItems\n                        extra\n                    }\n                }\n            }\n        }\n    }\n": types.TenantBillingInvoicesDocument,
     "\n    query ConnectorsGrid($filter: ConnectorsFilter, $after: String) {\n        connectors(first: 500, after: $after, filter: $filter) {\n            edges {\n                cursor\n                node {\n                    id\n                    imageName\n                    logoUrl\n                    title\n                    recommended\n                    detail\n                    defaultSpec {\n                        id\n                        imageTag\n                        documentationUrl\n                        protocol\n                    }\n                }\n            }\n            pageInfo {\n                hasNextPage\n                endCursor\n            }\n        }\n    }\n": types.ConnectorsGridDocument,
     "\n    query ConnectorTagData($imageName: String!, $fullImageName: String!) {\n        connector(imageName: $imageName) {\n            id\n            imageName\n            logoUrl\n            title\n        }\n        connectorSpec(fullImageName: $fullImageName) {\n            id\n            imageTag\n            defaultCaptureInterval\n            disableBackfill\n            documentationUrl\n            endpointSpecSchema\n            resourceSpecSchema\n            protocol\n        }\n    }\n": types.ConnectorTagDataDocument,
     "\n    query DataPlanes($after: String) {\n        dataPlanes(first: 100, after: $after) {\n            edges {\n                node {\n                    name\n                    cloudProvider\n                    region\n                    isPublic\n                    fqdn\n                    cidrBlocks\n                    awsIamUserArn\n                    gcpServiceAccountEmail\n                    azureApplicationClientId\n                    azureApplicationName\n                }\n            }\n            pageInfo {\n                hasNextPage\n                endCursor\n            }\n        }\n    }\n": types.DataPlanesDocument,
@@ -104,6 +106,10 @@ export function graphql(source: "\n    mutation UpdateAlertSubscriptionMutation(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n    query AlertType {\n        alertTypes {\n            alertType\n            description\n            displayName\n            isDefault\n            isSystem\n        }\n    }\n"): (typeof documents)["\n    query AlertType {\n        alertTypes {\n            alertType\n            description\n            displayName\n            isDefault\n            isSystem\n        }\n    }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n    query TenantBillingInvoices($tenant: String!, $first: Int) {\n        tenant(name: $tenant) {\n            billing {\n                invoices(first: $first) {\n                    nodes {\n                        dateStart\n                        dateEnd\n                        invoiceType\n                        subtotal\n                        lineItems\n                        extra\n                    }\n                }\n            }\n        }\n    }\n"): (typeof documents)["\n    query TenantBillingInvoices($tenant: String!, $first: Int) {\n        tenant(name: $tenant) {\n            billing {\n                invoices(first: $first) {\n                    nodes {\n                        dateStart\n                        dateEnd\n                        invoiceType\n                        subtotal\n                        lineItems\n                        extra\n                    }\n                }\n            }\n        }\n    }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/src/gql-types/graphql.ts b/src/gql-types/graphql.ts
index 231e807659..544e870f41 100644
--- a/src/gql-types/graphql.ts
+++ b/src/gql-types/graphql.ts
@@ -1962,6 +1962,14 @@ export type AlertTypeQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type AlertTypeQuery = { __typename?: 'QueryRoot', alertTypes: Array<{ __typename?: 'AlertTypeInfo', alertType: AlertType, description: string, displayName: string, isDefault: boolean, isSystem: boolean }> };
 
+export type TenantBillingInvoicesQueryVariables = Exact<{
+  tenant: Scalars['String']['input'];
+  first?: InputMaybe<Scalars['Int']['input']>;
+}>;
+
+
+export type TenantBillingInvoicesQuery = { __typename?: 'QueryRoot', tenant?: { __typename?: 'Tenant', billing: { __typename?: 'TenantBilling', invoices: { __typename?: 'InvoiceConnection', nodes: Array<{ __typename?: 'Invoice', dateStart: string, dateEnd: string, invoiceType: InvoiceType, subtotal: number, lineItems: any, extra: any }> } } } | null };
+
 export type ConnectorsGridQueryVariables = Exact<{
   filter?: InputMaybe<ConnectorsFilter>;
   after?: InputMaybe<Scalars['String']['input']>;
@@ -2128,6 +2136,7 @@ export const DeleteAlertSubscriptionMutationDocument = {"kind":"Document","defin
 export const AlertSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AlertSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"prefix"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Prefix"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"alertSubscriptions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"by"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"prefix"},"value":{"kind":"Variable","name":{"kind":"Name","value":"prefix"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"alertTypes"}},{"kind":"Field","name":{"kind":"Name","value":"catalogPrefix"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode<AlertSubscriptionsQuery, AlertSubscriptionsQueryVariables>;
 export const UpdateAlertSubscriptionMutationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateAlertSubscriptionMutation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"prefix"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Prefix"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"email"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"alertTypes"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AlertType"}}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"detail"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateAlertSubscription"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"prefix"},"value":{"kind":"Variable","name":{"kind":"Name","value":"prefix"}}},{"kind":"Argument","name":{"kind":"Name","value":"email"},"value":{"kind":"Variable","name":{"kind":"Name","value":"email"}}},{"kind":"Argument","name":{"kind":"Name","value":"alertTypes"},"value":{"kind":"Variable","name":{"kind":"Name","value":"alertTypes"}}},{"kind":"Argument","name":{"kind":"Name","value":"detail"},"value":{"kind":"Variable","name":{"kind":"Name","value":"detail"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"catalogPrefix"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]}}]} as unknown as DocumentNode<UpdateAlertSubscriptionMutationMutation, UpdateAlertSubscriptionMutationMutationVariables>;
 export const AlertTypeDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AlertType"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"alertTypes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"alertType"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}},{"kind":"Field","name":{"kind":"Name","value":"isSystem"}}]}}]}}]} as unknown as DocumentNode<AlertTypeQuery, AlertTypeQueryVariables>;
+export const TenantBillingInvoicesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"TenantBillingInvoices"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"tenant"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"tenant"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"name"},"value":{"kind":"Variable","name":{"kind":"Name","value":"tenant"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billing"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"invoices"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"dateStart"}},{"kind":"Field","name":{"kind":"Name","value":"dateEnd"}},{"kind":"Field","name":{"kind":"Name","value":"invoiceType"}},{"kind":"Field","name":{"kind":"Name","value":"subtotal"}},{"kind":"Field","name":{"kind":"Name","value":"lineItems"}},{"kind":"Field","name":{"kind":"Name","value":"extra"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<TenantBillingInvoicesQuery, TenantBillingInvoicesQueryVariables>;
 export const ConnectorsGridDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ConnectorsGrid"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ConnectorsFilter"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"after"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connectors"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"500"}},{"kind":"Argument","name":{"kind":"Name","value":"after"},"value":{"kind":"Variable","name":{"kind":"Name","value":"after"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cursor"}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"imageName"}},{"kind":"Field","name":{"kind":"Name","value":"logoUrl"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"recommended"}},{"kind":"Field","name":{"kind":"Name","value":"detail"}},{"kind":"Field","name":{"kind":"Name","value":"defaultSpec"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"imageTag"}},{"kind":"Field","name":{"kind":"Name","value":"documentationUrl"}},{"kind":"Field","name":{"kind":"Name","value":"protocol"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"endCursor"}}]}}]}}]}}]} as unknown as DocumentNode<ConnectorsGridQuery, ConnectorsGridQueryVariables>;
 export const ConnectorTagDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ConnectorTagData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"imageName"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"fullImageName"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connector"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"imageName"},"value":{"kind":"Variable","name":{"kind":"Name","value":"imageName"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"imageName"}},{"kind":"Field","name":{"kind":"Name","value":"logoUrl"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"connectorSpec"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"fullImageName"},"value":{"kind":"Variable","name":{"kind":"Name","value":"fullImageName"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"imageTag"}},{"kind":"Field","name":{"kind":"Name","value":"defaultCaptureInterval"}},{"kind":"Field","name":{"kind":"Name","value":"disableBackfill"}},{"kind":"Field","name":{"kind":"Name","value":"documentationUrl"}},{"kind":"Field","name":{"kind":"Name","value":"endpointSpecSchema"}},{"kind":"Field","name":{"kind":"Name","value":"resourceSpecSchema"}},{"kind":"Field","name":{"kind":"Name","value":"protocol"}}]}}]}}]} as unknown as DocumentNode<ConnectorTagDataQuery, ConnectorTagDataQueryVariables>;
 export const DataPlanesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"DataPlanes"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"after"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"dataPlanes"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"100"}},{"kind":"Argument","name":{"kind":"Name","value":"after"},"value":{"kind":"Variable","name":{"kind":"Name","value":"after"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"cloudProvider"}},{"kind":"Field","name":{"kind":"Name","value":"region"}},{"kind":"Field","name":{"kind":"Name","value":"isPublic"}},{"kind":"Field","name":{"kind":"Name","value":"fqdn"}},{"kind":"Field","name":{"kind":"Name","value":"cidrBlocks"}},{"kind":"Field","name":{"kind":"Name","value":"awsIamUserArn"}},{"kind":"Field","name":{"kind":"Name","value":"gcpServiceAccountEmail"}},{"kind":"Field","name":{"kind":"Name","value":"azureApplicationClientId"}},{"kind":"Field","name":{"kind":"Name","value":"azureApplicationName"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"endCursor"}}]}}]}}]}}]} as unknown as DocumentNode<DataPlanesQuery, DataPlanesQueryVariables>;
diff --git a/src/hooks/billing/useBillingInvoices.ts b/src/hooks/billing/useBillingInvoices.ts
new file mode 100644
index 0000000000..05c5fc7e25
--- /dev/null
+++ b/src/hooks/billing/useBillingInvoices.ts
@@ -0,0 +1,139 @@
+import type { Invoice, InvoiceLineItem } from 'src/api/billing';
+
+import { useMemo } from 'react';
+import useConstant from 'use-constant';
+
+import {
+    compareDesc,
+    endOfMonth,
+    isWithinInterval,
+    startOfMonth,
+    subMonths,
+} from 'date-fns';
+import { useQuery } from 'urql';
+
+import {
+    BILLING_INVOICE_FETCH_LIMIT,
+    TENANT_BILLING_INVOICES_QUERY,
+} from 'src/api/gql/billing';
+import { useBillingStore } from 'src/stores/Billing';
+import { useTenantStore } from 'src/stores/Tenant';
+import { invoiceId, stripTimeFromDate } from 'src/utils/billing-utils';
+
+export interface UseBillingInvoicesResult {
+    invoices: Invoice[];
+    // The invoice currently shown in the line-item/detail views: the stored
+    // selection if it still exists in this tenant's data, otherwise the newest
+    // invoice. Falling back this way means an org switch self-corrects without
+    // anyone resetting state.
+    selectedInvoice: Invoice | null;
+    isLoading: boolean;
+    networkFailed: boolean;
+    errorExists: boolean;
+}
+
+interface DateWindow {
+    start: Date;
+    end: Date;
+}
+
+// The GQL invoice node is camelCased and omits `billed_prefix` (the tenant is
+// the query parent). Map it back to the shape the billing UI already consumes.
+const mapInvoice = (
+    node: {
+        dateStart: string;
+        dateEnd: string;
+        invoiceType: string;
+        subtotal: number;
+        lineItems: unknown;
+        extra: unknown;
+    },
+    tenant: string
+): Invoice => ({
+    billed_prefix: tenant,
+    date_start: node.dateStart,
+    date_end: node.dateEnd,
+    invoice_type: node.invoiceType.toLowerCase() as Invoice['invoice_type'],
+    subtotal: node.subtotal,
+    line_items: (node.lineItems ?? []) as InvoiceLineItem[],
+    extra: (node.extra ?? undefined) as Invoice['extra'],
+});
+
+// Mirrors the predicate the previous PostgREST query enforced server-side:
+// invoices whose start and end both fall inside the rolling window, plus any
+// manual invoice regardless of date.
+const isVisible = (invoice: Invoice, { start, end }: DateWindow): boolean => {
+    if (invoice.invoice_type === 'manual') {
+        return true;
+    }
+
+    return (
+        isWithinInterval(stripTimeFromDate(invoice.date_start), {
+            start,
+            end,
+        }) &&
+        isWithinInterval(stripTimeFromDate(invoice.date_end), { start, end })
+    );
+};
+
+// Fetches the selected tenant's invoices via GraphQL. urql keys its cache on
+// the query variables, so switching tenants re-runs the query and a previously
+// viewed tenant is served from cache — the previous tenant's data is never
+// shown. Server-side filtering on `billing.invoices` is narrower than the old
+// PostgREST query (no "window OR manual" predicate), so the window/manual
+// filter and newest-first sort are reproduced here.
+export function useBillingInvoices(): UseBillingInvoicesResult {
+    const selectedTenant = useTenantStore((state) => state.selectedTenant);
+    const selectedInvoiceId = useBillingStore(
+        (state) => state.selectedInvoiceId
+    );
+
+    const dateWindow = useConstant<DateWindow>(() => {
+        const end = endOfMonth(new Date());
+
+        return { start: startOfMonth(subMonths(end, 5)), end };
+    });
+
+    const [{ data, fetching, error }] = useQuery({
+        query: TENANT_BILLING_INVOICES_QUERY,
+        variables: {
+            tenant: selectedTenant,
+            first: BILLING_INVOICE_FETCH_LIMIT,
+        },
+        pause: !selectedTenant,
+    });
+
+    const invoices = useMemo(() => {
+        const nodes = data?.tenant?.billing.invoices.nodes ?? [];
+
+        return nodes
+            .map((node) => mapInvoice(node, selectedTenant))
+            .filter((invoice) => isVisible(invoice, dateWindow))
+            .sort((a, b) =>
+                compareDesc(
+                    stripTimeFromDate(a.date_start),
+                    stripTimeFromDate(b.date_start)
+                )
+            );
+    }, [data, dateWindow, selectedTenant]);
+
+    const selectedInvoice = useMemo(() => {
+        if (invoices.length === 0) {
+            return null;
+        }
+
+        return (
+            invoices.find(
+                (invoice) => invoiceId(invoice) === selectedInvoiceId
+            ) ?? invoices[0]
+        );
+    }, [invoices, selectedInvoiceId]);
+
+    return {
+        invoices,
+        selectedInvoice,
+        isLoading: fetching,
+        networkFailed: Boolean(error?.networkError),
+        errorExists: Boolean(error),
+    };
+}
diff --git a/src/stores/Billing.ts b/src/stores/Billing.ts
index 8f45e333c2..56e161313f 100644
--- a/src/stores/Billing.ts
+++ b/src/stores/Billing.ts
@@ -1,5 +1,3 @@
-import type { Invoice } from 'src/api/billing';
-import type { StoreWithHydration } from 'src/stores/extensions/Hydration';
 import type { InvoiceId } from 'src/utils/billing-utils';
 import type { NamedSet } from 'zustand/middleware';
 
@@ -9,42 +7,21 @@ import { devtools } from 'zustand/middleware';
 import produce from 'immer';
 import { isArray } from 'lodash';
 
-import {
-    getInitialHydrationData,
-    getStoreWithHydrationSettings,
-} from 'src/stores/extensions/Hydration';
-import { invoiceId } from 'src/utils/billing-utils';
 import { hasLength } from 'src/utils/misc-utils';
 import { devtoolsOptions } from 'src/utils/store-utils';
 
-interface BillingState extends StoreWithHydration {
+interface BillingState {
     selectedInvoiceId: InvoiceId | null;
     setSelectedInvoice: (value: InvoiceId) => void;
 
-    invoices: Invoice[];
-    setInvoices: (value: Invoice[]) => void;
-
     paymentMethodExists: boolean | null;
     setPaymentMethodExists: (value: any[] | undefined) => void;
-
-    resetState: () => void;
 }
 
-const getInitialStateData = (): Pick<
-    BillingState,
-    'invoices' | 'paymentMethodExists' | 'selectedInvoiceId'
-> => {
+const getInitialState = (set: NamedSet<BillingState>): BillingState => {
     return {
         selectedInvoiceId: null,
-        invoices: [],
         paymentMethodExists: null,
-    };
-};
-
-const getInitialState = (set: NamedSet<BillingState>): BillingState => {
-    return {
-        ...getInitialStateData(),
-        ...getStoreWithHydrationSettings('Billing', set),
 
         setSelectedInvoice: (value) => {
             set(
@@ -56,20 +33,6 @@ const getInitialState = (set: NamedSet<BillingState>): BillingState => {
             );
         },
 
-        setInvoices: (value) => {
-            set(
-                produce((state: BillingState) => {
-                    if (state.active) {
-                        state.invoices = value;
-                        state.selectedInvoiceId =
-                            value.length > 0 ? invoiceId(value[0]) : null;
-                    }
-                }),
-                false,
-                'Billing Details Set'
-            );
-        },
-
         setPaymentMethodExists: (value) => {
             set(
                 produce((state: BillingState) => {
@@ -80,28 +43,9 @@ const getInitialState = (set: NamedSet<BillingState>): BillingState => {
                 'Payment Exists Updated'
             );
         },
-
-        resetState: () => {
-            set(
-                { ...getInitialStateData(), ...getInitialHydrationData() },
-                false,
-                'State Reset'
-            );
-        },
     };
 };
 
 export const useBillingStore = create<BillingState>()(
     devtools((set) => getInitialState(set), devtoolsOptions('billing'))
 );
-
-// Selector Hooks
-export const useBilling_selectedInvoice = () => {
-    return useBillingStore((state) =>
-        state.selectedInvoiceId
-            ? (state.invoices.find(
-                  (inv) => invoiceId(inv) === state.selectedInvoiceId
-              ) ?? null)
-            : null
-    );
-};