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 { RiStore2Line } from "@remixicon/react";
|
||||
import PageDescription from "@/components/page-description";
|
||||
|
||||
export const metadata = {
|
||||
title: "Top Estabelecimentos | Opensheets",
|
||||
title: "Top Estabelecimentos | Opensheets",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 px-6">
|
||||
<PageDescription
|
||||
icon={<RiStore2Line />}
|
||||
title="Top Estabelecimentos"
|
||||
subtitle="Análise dos locais onde você mais compra e gasta"
|
||||
/>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<section className="space-y-6 px-6">
|
||||
<PageDescription
|
||||
icon={<RiStore2Line />}
|
||||
title="Top Estabelecimentos"
|
||||
subtitle="Análise dos locais onde você mais compra e gasta"
|
||||
/>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,57 +2,57 @@ 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 sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<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>
|
||||
return (
|
||||
<main className="flex flex-col gap-4 px-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<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 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 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>
|
||||
);
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,71 +6,71 @@ import { TopCategories } from "@/components/top-estabelecimentos/top-categories"
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { getUser } from "@/lib/auth/server";
|
||||
import {
|
||||
fetchTopEstabelecimentosData,
|
||||
type PeriodFilter,
|
||||
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;
|
||||
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;
|
||||
};
|
||||
|
||||
const validatePeriodFilter = (value: string | null): PeriodFilter => {
|
||||
if (value === "3" || value === "6" || value === "12") {
|
||||
return value;
|
||||
}
|
||||
return "6";
|
||||
if (value === "3" || value === "6" || value === "12") {
|
||||
return value;
|
||||
}
|
||||
return "6";
|
||||
};
|
||||
|
||||
export default async function TopEstabelecimentosPage({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: PageProps) {
|
||||
const user = await getUser();
|
||||
const resolvedSearchParams = searchParams ? await searchParams : undefined;
|
||||
const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
|
||||
const mesesParam = getSingleParam(resolvedSearchParams, "meses");
|
||||
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 { period: currentPeriod } = parsePeriodParam(periodoParam);
|
||||
const periodFilter = validatePeriodFilter(mesesParam);
|
||||
|
||||
const data = await fetchTopEstabelecimentosData(
|
||||
user.id,
|
||||
currentPeriod,
|
||||
periodFilter,
|
||||
);
|
||||
const data = await fetchTopEstabelecimentosData(
|
||||
user.id,
|
||||
currentPeriod,
|
||||
periodFilter,
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="flex flex-col gap-4">
|
||||
<Card className="p-3 flex-row justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Selecione o período
|
||||
</span>
|
||||
<PeriodFilterButtons currentFilter={periodFilter} />
|
||||
</Card>
|
||||
return (
|
||||
<main className="flex flex-col gap-4">
|
||||
<Card className="p-3 flex-row justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Selecione o período
|
||||
</span>
|
||||
<PeriodFilterButtons currentFilter={periodFilter} />
|
||||
</Card>
|
||||
|
||||
<SummaryCards summary={data.summary} />
|
||||
<SummaryCards summary={data.summary} />
|
||||
|
||||
<HighlightsCards summary={data.summary} />
|
||||
<HighlightsCards summary={data.summary} />
|
||||
|
||||
<div className="grid gap-4 @3xl/main:grid-cols-3">
|
||||
<div className="@3xl/main:col-span-2">
|
||||
<EstablishmentsList establishments={data.establishments} />
|
||||
</div>
|
||||
<div>
|
||||
<TopCategories categories={data.topCategories} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
<div className="grid gap-4 @3xl/main:grid-cols-3">
|
||||
<div className="@3xl/main:col-span-2">
|
||||
<EstablishmentsList establishments={data.establishments} />
|
||||
</div>
|
||||
<div>
|
||||
<TopCategories categories={data.topCategories} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user