feat(dashboard): add quick actions and new overview widgets

app/(dashboard)/dashboard/page.tsx

@@ -4,7 +4,13 @@ import { SectionCards } from "@/components/dashboard/section-cards";
 import MonthNavigation from "@/components/month-picker/month-navigation";
 import { getUser } from "@/lib/auth/server";
 import { fetchDashboardData } from "@/lib/dashboard/fetch-dashboard-data";
+import {
+	buildOptionSets,
+	buildSluggedFilters,
+	fetchLancamentoFilterSources,
+} from "@/lib/lancamentos/page-helpers";
 import { parsePeriodParam } from "@/lib/utils/period";
+import { getRecentEstablishmentsAction } from "../lancamentos/actions";
 import { fetchUserDashboardPreferences } from "./data";
 
 type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
@@ -28,12 +34,26 @@ export default async function Page({ searchParams }: PageProps) {
 	const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
 	const { period: selectedPeriod } = parsePeriodParam(periodoParam);
 
-	const [data, preferences] = await Promise.all([
-		fetchDashboardData(user.id, selectedPeriod),
-		fetchUserDashboardPreferences(user.id),
-	]);
-
+	const [dashboardData, preferences, filterSources, estabelecimentos] =
+		await Promise.all([
+			fetchDashboardData(user.id, selectedPeriod),
+			fetchUserDashboardPreferences(user.id),
+			fetchLancamentoFilterSources(user.id),
+			getRecentEstablishmentsAction(),
+		]);
 	const { disableMagnetlines, dashboardWidgets } = preferences;
+	const sluggedFilters = buildSluggedFilters(filterSources);
+	const {
+		pagadorOptions,
+		splitPagadorOptions,
+		defaultPagadorId,
+		contaOptions,
+		cartaoOptions,
+		categoriaOptions,
+	} = buildOptionSets({
+		...sluggedFilters,
+		pagadorRows: filterSources.pagadorRows,
+	});
 
 	return (
 		<main className="flex flex-col gap-4">
@@ -42,11 +62,20 @@ export default async function Page({ searchParams }: PageProps) {
 				disableMagnetlines={disableMagnetlines}
 			/>
 			<MonthNavigation />
-			<SectionCards metrics={data.metrics} />
+			<SectionCards metrics={dashboardData.metrics} />
 			<DashboardGridEditable
-				data={data}
+				data={dashboardData}
 				period={selectedPeriod}
 				initialPreferences={dashboardWidgets}
+				quickActionOptions={{
+					pagadorOptions,
+					splitPagadorOptions,
+					defaultPagadorId,
+					contaOptions,
+					cartaoOptions,
+					categoriaOptions,
+					estabelecimentos,
+				}}
 			/>
 		</main>
 	);

app/(dashboard)/relatorios/estabelecimentos/layout.tsx

@@ -0,0 +1,23 @@
+import { RiStore2Line } from "@remixicon/react";
+import PageDescription from "@/components/page-description";
+
+export const metadata = {
+	title: "Top Estabelecimentos | OpenMonetis",
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<section className="space-y-6 pt-4">
+			<PageDescription
+				icon={<RiStore2Line />}
+				title="Top Estabelecimentos"
+				subtitle="Análise dos locais onde você mais compra e gasta"
+			/>
+			{children}
+		</section>
+	);
+}

app/(dashboard)/relatorios/estabelecimentos/loading.tsx

@@ -0,0 +1,58 @@
+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-4 sm:flex-row sm:items-center sm:justify-between">
+				<div className="flex flex-col gap-1">
+					<Skeleton className="h-8 w-48" />
+					<Skeleton className="h-4 w-64" />
+				</div>
+				<Skeleton className="h-8 w-48" />
+			</div>
+
+			<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+				{[1, 2, 3, 4].map((i) => (
+					<Card key={i}>
+						<CardContent className="p-4">
+							<Skeleton className="h-16 w-full" />
+						</CardContent>
+					</Card>
+				))}
+			</div>
+
+			<div className="grid gap-4 sm:grid-cols-2">
+				<Skeleton className="h-20 w-full" />
+				<Skeleton className="h-20 w-full" />
+			</div>
+
+			<div className="grid gap-4 lg:grid-cols-3">
+				<div className="lg:col-span-2">
+					<Card>
+						<CardHeader>
+							<Skeleton className="h-5 w-48" />
+						</CardHeader>
+						<CardContent className="space-y-4">
+							{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+								<Skeleton key={i} className="h-16 w-full" />
+							))}
+						</CardContent>
+					</Card>
+				</div>
+				<div>
+					<Card>
+						<CardHeader>
+							<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>
+			</div>
+		</main>
+	);
+}

app/(dashboard)/relatorios/estabelecimentos/page.tsx

@@ -0,0 +1,76 @@
+import { EstablishmentsList } from "@/components/top-estabelecimentos/establishments-list";
+import { HighlightsCards } from "@/components/top-estabelecimentos/highlights-cards";
+import { PeriodFilterButtons } from "@/components/top-estabelecimentos/period-filter";
+import { SummaryCards } from "@/components/top-estabelecimentos/summary-cards";
+import { TopCategories } from "@/components/top-estabelecimentos/top-categories";
+import { Card } from "@/components/ui/card";
+import { getUser } from "@/lib/auth/server";
+import {
+	fetchTopEstabelecimentosData,
+	type PeriodFilter,
+} from "@/lib/top-estabelecimentos/fetch-data";
+import { parsePeriodParam } from "@/lib/utils/period";
+
+type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+type PageProps = {
+	searchParams?: PageSearchParams;
+};
+
+const getSingleParam = (
+	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 validatePeriodFilter = (value: string | null): PeriodFilter => {
+	if (value === "3" || value === "6" || value === "12") {
+		return value;
+	}
+	return "6";
+};
+
+export default async function TopEstabelecimentosPage({
+	searchParams,
+}: PageProps) {
+	const user = await getUser();
+	const resolvedSearchParams = searchParams ? await searchParams : undefined;
+	const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
+	const mesesParam = getSingleParam(resolvedSearchParams, "meses");
+
+	const { period: currentPeriod } = parsePeriodParam(periodoParam);
+	const periodFilter = validatePeriodFilter(mesesParam);
+
+	const data = await fetchTopEstabelecimentosData(
+		user.id,
+		currentPeriod,
+		periodFilter,
+	);
+
+	return (
+		<main className="flex flex-col gap-4">
+			<Card className="flex-row items-center justify-between p-3">
+				<span className="text-sm text-muted-foreground">
+					Selecione o intervalo de meses
+				</span>
+				<PeriodFilterButtons currentFilter={periodFilter} />
+			</Card>
+
+			<SummaryCards summary={data.summary} />
+
+			<HighlightsCards summary={data.summary} />
+
+			<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+				<div>
+					<EstablishmentsList establishments={data.establishments} />
+				</div>
+				<div>
+					<TopCategories categories={data.topCategories} />
+				</div>
+			</div>
+		</main>
+	);
+}