import { CustomerPageShell } from "@/app/customer/_components/customer-page-shell";
import { Suspense } from "react";

import { ReportLoadingPanel } from "@/app/customer/[tenant]/reports/_shared/components/report-loading-panel";
import { ReportPageGuard } from "@/app/customer/[tenant]/reports/_shared/components/report-page-guard";
import { CUSTOMER_ROUTE_KEYS } from "@/config/customer-route-keys";
import { CashflowAnnualView } from "./_components/cashflow-annual/cashflow-annual-view";

type PageProps = { params: Promise<{ tenant: string }> };

export default async function CashflowAnnualReportPage({ params }: PageProps) {
  const { tenant } = await params;
  return (
    <CustomerPageShell contentClassName="px-4 pt-3 pb-3 lg:px-6">
      {/* Own Roles grant ("Annual Return"), separate from the Cashflow report. */}
      <ReportPageGuard tenant={tenant} routeKeys={CUSTOMER_ROUTE_KEYS.cashflowAnnual} label="Annual Return">
        <Suspense fallback={<ReportLoadingPanel loading label="Loading annual return…" />}>
          <CashflowAnnualView />
        </Suspense>
      </ReportPageGuard>
    </CustomerPageShell>
  );
}