forked from git.gladyson/openmonetis
refactor: migrate from ESLint to Biome and extract SQL queries to data.ts
- Replace ESLint with Biome for linting and formatting - Configure Biome with tabs, double quotes, and organized imports - Move all SQL/Drizzle queries from page.tsx files to data.ts files - Create new data.ts files for: ajustes, dashboard, relatorios/categorias - Update existing data.ts files: extrato, fatura (add lancamentos queries) - Remove all drizzle-orm imports from page.tsx files - Update README.md with new tooling info Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
@@ -1,23 +1,23 @@
|
||||
import PageDescription from "@/components/page-description";
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
import PageDescription from "@/components/page-description";
|
||||
|
||||
export const metadata = {
|
||||
title: "Relatório de Cartões | Opensheets",
|
||||
title: "Relatório de Cartões | Opensheets",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 px-6">
|
||||
<PageDescription
|
||||
icon={<RiBankCard2Line />}
|
||||
title="Relatório de Cartões"
|
||||
subtitle="Análise detalhada do uso dos seus cartões de crédito."
|
||||
/>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<section className="space-y-6 px-6">
|
||||
<PageDescription
|
||||
icon={<RiBankCard2Line />}
|
||||
title="Relatório de Cartões"
|
||||
subtitle="Análise detalhada do uso dos seus cartões de crédito."
|
||||
/>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,84 +2,84 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<main className="flex flex-col gap-4 px-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-96" />
|
||||
</div>
|
||||
return (
|
||||
<main className="flex flex-col gap-4 px-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-96" />
|
||||
</div>
|
||||
|
||||
<Skeleton className="h-10 w-full max-w-md" />
|
||||
<Skeleton className="h-10 w-full max-w-md" />
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<div className="lg:col-span-1">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="h-20 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<div className="lg:col-span-1">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="h-20 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-[280px] w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-[280px] w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<Skeleton key={i} className="h-10 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<Skeleton key={i} className="h-10 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
import MonthNavigation from "@/components/month-picker/month-navigation";
|
||||
import { CardCategoryBreakdown } from "@/components/relatorios/cartoes/card-category-breakdown";
|
||||
import { CardInvoiceStatus } from "@/components/relatorios/cartoes/card-invoice-status";
|
||||
@@ -7,79 +8,78 @@ import { CardsOverview } from "@/components/relatorios/cartoes/cards-overview";
|
||||
import { getUser } from "@/lib/auth/server";
|
||||
import { fetchCartoesReportData } from "@/lib/relatorios/cartoes-report";
|
||||
import { parsePeriodParam } from "@/lib/utils/period";
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
|
||||
type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
|
||||
|
||||
type PageProps = {
|
||||
searchParams?: PageSearchParams;
|
||||
searchParams?: PageSearchParams;
|
||||
};
|
||||
|
||||
const getSingleParam = (
|
||||
params: Record<string, string | string[] | undefined> | undefined,
|
||||
key: string,
|
||||
params: Record<string, string | string[] | undefined> | undefined,
|
||||
key: string,
|
||||
) => {
|
||||
const value = params?.[key];
|
||||
if (!value) return null;
|
||||
return Array.isArray(value) ? (value[0] ?? null) : value;
|
||||
const value = params?.[key];
|
||||
if (!value) return null;
|
||||
return Array.isArray(value) ? (value[0] ?? null) : value;
|
||||
};
|
||||
|
||||
export default async function RelatorioCartoesPage({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: PageProps) {
|
||||
const user = await getUser();
|
||||
const resolvedSearchParams = searchParams ? await searchParams : undefined;
|
||||
const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
|
||||
const cartaoParam = getSingleParam(resolvedSearchParams, "cartao");
|
||||
const { period: selectedPeriod } = parsePeriodParam(periodoParam);
|
||||
const user = await getUser();
|
||||
const resolvedSearchParams = searchParams ? await searchParams : undefined;
|
||||
const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
|
||||
const cartaoParam = getSingleParam(resolvedSearchParams, "cartao");
|
||||
const { period: selectedPeriod } = parsePeriodParam(periodoParam);
|
||||
|
||||
const data = await fetchCartoesReportData(
|
||||
user.id,
|
||||
selectedPeriod,
|
||||
cartaoParam,
|
||||
);
|
||||
const data = await fetchCartoesReportData(
|
||||
user.id,
|
||||
selectedPeriod,
|
||||
cartaoParam,
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="flex flex-col gap-4">
|
||||
<MonthNavigation />
|
||||
return (
|
||||
<main className="flex flex-col gap-4">
|
||||
<MonthNavigation />
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<div className="lg:col-span-1">
|
||||
<CardsOverview data={data} />
|
||||
</div>
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<div className="lg:col-span-1">
|
||||
<CardsOverview data={data} />
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
{data.selectedCard ? (
|
||||
<>
|
||||
<CardUsageChart
|
||||
data={data.selectedCard.monthlyUsage}
|
||||
limit={data.selectedCard.card.limit}
|
||||
card={{
|
||||
name: data.selectedCard.card.name,
|
||||
logo: data.selectedCard.card.logo,
|
||||
}}
|
||||
/>
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
{data.selectedCard ? (
|
||||
<>
|
||||
<CardUsageChart
|
||||
data={data.selectedCard.monthlyUsage}
|
||||
limit={data.selectedCard.card.limit}
|
||||
card={{
|
||||
name: data.selectedCard.card.name,
|
||||
logo: data.selectedCard.card.logo,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<CardCategoryBreakdown
|
||||
data={data.selectedCard.categoryBreakdown}
|
||||
/>
|
||||
<CardTopExpenses data={data.selectedCard.topExpenses} />
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<CardCategoryBreakdown
|
||||
data={data.selectedCard.categoryBreakdown}
|
||||
/>
|
||||
<CardTopExpenses data={data.selectedCard.topExpenses} />
|
||||
</div>
|
||||
|
||||
<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<RiBankCard2Line className="size-12 mb-4" />
|
||||
<p className="text-lg font-medium">Nenhum cartão selecionado</p>
|
||||
<p className="text-sm">
|
||||
Selecione um cartão na lista ao lado para ver detalhes.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<RiBankCard2Line className="size-12 mb-4" />
|
||||
<p className="text-lg font-medium">Nenhum cartão selecionado</p>
|
||||
<p className="text-sm">
|
||||
Selecione um cartão na lista ao lado para ver detalhes.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
12
app/(dashboard)/relatorios/categorias/data.ts
Normal file
12
app/(dashboard)/relatorios/categorias/data.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { asc, eq } from "drizzle-orm";
|
||||
import { type Categoria, categorias } from "@/db/schema";
|
||||
import { db } from "@/lib/db";
|
||||
|
||||
export async function fetchUserCategories(
|
||||
userId: string,
|
||||
): Promise<Categoria[]> {
|
||||
return db.query.categorias.findMany({
|
||||
where: eq(categorias.userId, userId),
|
||||
orderBy: [asc(categorias.name)],
|
||||
});
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
import PageDescription from "@/components/page-description";
|
||||
import { RiFileChartLine } from "@remixicon/react";
|
||||
import PageDescription from "@/components/page-description";
|
||||
|
||||
export const metadata = {
|
||||
title: "Relatórios | Opensheets",
|
||||
title: "Relatórios | Opensheets",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 px-6">
|
||||
<PageDescription
|
||||
icon={<RiFileChartLine />}
|
||||
title="Relatórios de Categorias"
|
||||
subtitle="Acompanhe a evolução dos seus gastos e receitas por categoria ao longo do tempo."
|
||||
/>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<section className="space-y-6 px-6">
|
||||
<PageDescription
|
||||
icon={<RiFileChartLine />}
|
||||
title="Relatórios de Categorias"
|
||||
subtitle="Acompanhe a evolução dos seus gastos e receitas por categoria ao longo do tempo."
|
||||
/>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { CategoryReportSkeleton } from "@/components/skeletons/category-report-skeleton";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<main className="flex flex-col gap-6">
|
||||
<CategoryReportSkeleton />
|
||||
</main>
|
||||
);
|
||||
return (
|
||||
<main className="flex flex-col gap-6">
|
||||
<CategoryReportSkeleton />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,118 +1,114 @@
|
||||
import { CategoryReportPage } from "@/components/relatorios/category-report-page";
|
||||
import { getUserId } from "@/lib/auth/server";
|
||||
import { addMonthsToPeriod, getCurrentPeriod } from "@/lib/utils/period";
|
||||
import { validateDateRange } from "@/lib/relatorios/utils";
|
||||
import { fetchCategoryReport } from "@/lib/relatorios/fetch-category-report";
|
||||
import { fetchCategoryChartData } from "@/lib/relatorios/fetch-category-chart-data";
|
||||
import type { CategoryReportFilters } from "@/lib/relatorios/types";
|
||||
import type {
|
||||
CategoryOption,
|
||||
FilterState,
|
||||
} from "@/components/relatorios/types";
|
||||
import { db } from "@/lib/db";
|
||||
import { categorias, type Categoria } from "@/db/schema";
|
||||
import { eq, asc } from "drizzle-orm";
|
||||
import { redirect } from "next/navigation";
|
||||
import { CategoryReportPage } from "@/components/relatorios/category-report-page";
|
||||
import type {
|
||||
CategoryOption,
|
||||
FilterState,
|
||||
} from "@/components/relatorios/types";
|
||||
import type { Categoria } from "@/db/schema";
|
||||
import { getUserId } from "@/lib/auth/server";
|
||||
import { fetchCategoryChartData } from "@/lib/relatorios/fetch-category-chart-data";
|
||||
import { fetchCategoryReport } from "@/lib/relatorios/fetch-category-report";
|
||||
import type { CategoryReportFilters } from "@/lib/relatorios/types";
|
||||
import { validateDateRange } from "@/lib/relatorios/utils";
|
||||
import { addMonthsToPeriod, getCurrentPeriod } from "@/lib/utils/period";
|
||||
import { fetchUserCategories } from "./data";
|
||||
|
||||
type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
|
||||
|
||||
type PageProps = {
|
||||
searchParams?: PageSearchParams;
|
||||
searchParams?: PageSearchParams;
|
||||
};
|
||||
|
||||
const getSingleParam = (
|
||||
params: Record<string, string | string[] | undefined> | undefined,
|
||||
key: string
|
||||
params: Record<string, string | string[] | undefined> | undefined,
|
||||
key: string,
|
||||
): string | null => {
|
||||
const value = params?.[key];
|
||||
if (!value) return null;
|
||||
return Array.isArray(value) ? value[0] ?? null : value;
|
||||
const value = params?.[key];
|
||||
if (!value) return null;
|
||||
return Array.isArray(value) ? (value[0] ?? null) : value;
|
||||
};
|
||||
|
||||
export default async function Page({ searchParams }: PageProps) {
|
||||
// Get authenticated user
|
||||
const userId = await getUserId();
|
||||
// Get authenticated user
|
||||
const userId = await getUserId();
|
||||
|
||||
// Resolve search params
|
||||
const resolvedSearchParams = searchParams ? await searchParams : undefined;
|
||||
// Resolve search params
|
||||
const resolvedSearchParams = searchParams ? await searchParams : undefined;
|
||||
|
||||
// Extract query params
|
||||
const inicioParam = getSingleParam(resolvedSearchParams, "inicio");
|
||||
const fimParam = getSingleParam(resolvedSearchParams, "fim");
|
||||
const categoriasParam = getSingleParam(resolvedSearchParams, "categorias");
|
||||
// Extract query params
|
||||
const inicioParam = getSingleParam(resolvedSearchParams, "inicio");
|
||||
const fimParam = getSingleParam(resolvedSearchParams, "fim");
|
||||
const categoriasParam = getSingleParam(resolvedSearchParams, "categorias");
|
||||
|
||||
// Calculate default period (last 6 months)
|
||||
const currentPeriod = getCurrentPeriod();
|
||||
const defaultStartPeriod = addMonthsToPeriod(currentPeriod, -5); // 6 months including current
|
||||
// Calculate default period (last 6 months)
|
||||
const currentPeriod = getCurrentPeriod();
|
||||
const defaultStartPeriod = addMonthsToPeriod(currentPeriod, -5); // 6 months including current
|
||||
|
||||
// Use params or defaults
|
||||
const startPeriod = inicioParam ?? defaultStartPeriod;
|
||||
const endPeriod = fimParam ?? currentPeriod;
|
||||
// Use params or defaults
|
||||
const startPeriod = inicioParam ?? defaultStartPeriod;
|
||||
const endPeriod = fimParam ?? currentPeriod;
|
||||
|
||||
// Parse selected categories
|
||||
const selectedCategoryIds = categoriasParam
|
||||
? categoriasParam.split(",").filter(Boolean)
|
||||
: [];
|
||||
// Parse selected categories
|
||||
const selectedCategoryIds = categoriasParam
|
||||
? categoriasParam.split(",").filter(Boolean)
|
||||
: [];
|
||||
|
||||
// Validate date range
|
||||
const validation = validateDateRange(startPeriod, endPeriod);
|
||||
if (!validation.isValid) {
|
||||
// Redirect to default if validation fails
|
||||
redirect(
|
||||
`/relatorios/categorias?inicio=${defaultStartPeriod}&fim=${currentPeriod}`
|
||||
);
|
||||
}
|
||||
// Validate date range
|
||||
const validation = validateDateRange(startPeriod, endPeriod);
|
||||
if (!validation.isValid) {
|
||||
// Redirect to default if validation fails
|
||||
redirect(
|
||||
`/relatorios/categorias?inicio=${defaultStartPeriod}&fim=${currentPeriod}`,
|
||||
);
|
||||
}
|
||||
|
||||
// Fetch all categories for the user
|
||||
const categoriaRows = await db.query.categorias.findMany({
|
||||
where: eq(categorias.userId, userId),
|
||||
orderBy: [asc(categorias.name)],
|
||||
});
|
||||
// Fetch all categories for the user
|
||||
const categoriaRows = await fetchUserCategories(userId);
|
||||
|
||||
// Map to CategoryOption format
|
||||
const categoryOptions: CategoryOption[] = categoriaRows.map(
|
||||
(cat: Categoria): CategoryOption => ({
|
||||
id: cat.id,
|
||||
name: cat.name,
|
||||
icon: cat.icon,
|
||||
type: cat.type as "despesa" | "receita",
|
||||
})
|
||||
);
|
||||
// Map to CategoryOption format
|
||||
const categoryOptions: CategoryOption[] = categoriaRows.map(
|
||||
(cat: Categoria): CategoryOption => ({
|
||||
id: cat.id,
|
||||
name: cat.name,
|
||||
icon: cat.icon,
|
||||
type: cat.type as "despesa" | "receita",
|
||||
}),
|
||||
);
|
||||
|
||||
// Build filters for data fetching
|
||||
const filters: CategoryReportFilters = {
|
||||
startPeriod,
|
||||
endPeriod,
|
||||
categoryIds:
|
||||
selectedCategoryIds.length > 0 ? selectedCategoryIds : undefined,
|
||||
};
|
||||
// Build filters for data fetching
|
||||
const filters: CategoryReportFilters = {
|
||||
startPeriod,
|
||||
endPeriod,
|
||||
categoryIds:
|
||||
selectedCategoryIds.length > 0 ? selectedCategoryIds : undefined,
|
||||
};
|
||||
|
||||
// Fetch report data
|
||||
const reportData = await fetchCategoryReport(userId, filters);
|
||||
// Fetch report data
|
||||
const reportData = await fetchCategoryReport(userId, filters);
|
||||
|
||||
// Fetch chart data with same filters
|
||||
const chartData = await fetchCategoryChartData(
|
||||
userId,
|
||||
startPeriod,
|
||||
endPeriod,
|
||||
selectedCategoryIds.length > 0 ? selectedCategoryIds : undefined
|
||||
);
|
||||
// Fetch chart data with same filters
|
||||
const chartData = await fetchCategoryChartData(
|
||||
userId,
|
||||
startPeriod,
|
||||
endPeriod,
|
||||
selectedCategoryIds.length > 0 ? selectedCategoryIds : undefined,
|
||||
);
|
||||
|
||||
// Build initial filter state for client component
|
||||
const initialFilters: FilterState = {
|
||||
selectedCategories: selectedCategoryIds,
|
||||
startPeriod,
|
||||
endPeriod,
|
||||
};
|
||||
// Build initial filter state for client component
|
||||
const initialFilters: FilterState = {
|
||||
selectedCategories: selectedCategoryIds,
|
||||
startPeriod,
|
||||
endPeriod,
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="flex flex-col gap-6">
|
||||
<CategoryReportPage
|
||||
initialData={reportData}
|
||||
categories={categoryOptions}
|
||||
initialFilters={initialFilters}
|
||||
chartData={chartData}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
return (
|
||||
<main className="flex flex-col gap-6">
|
||||
<CategoryReportPage
|
||||
initialData={reportData}
|
||||
categories={categoryOptions}
|
||||
initialFilters={initialFilters}
|
||||
chartData={chartData}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user