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>

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

@@ -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>
+	);
 }

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

@@ -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>
+	);
 }

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

@@ -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>
+	);
 }