Files
openmonetis/components/sidebar/app-sidebar.tsx
Felipe Coutinho 6f5c41a4cf perf: otimizar dashboard com indexes, cache e consolidação de queries (v1.3.0)
- Adicionar indexes compostos em lancamentos para queries frequentes
- Eliminar ~20 JOINs com pagadores via helper cacheado getAdminPagadorId()
- Consolidar queries: income-expense-balance (12→1), payment-status (2→1), categories (4→2)
- Adicionar cache cross-request via unstable_cache com tag-based invalidation
- Limitar scan de métricas a 24 meses
- Deduplicar auth session por request via React.cache()

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-06 12:24:15 +00:00

84 lines
2.1 KiB
TypeScript

"use client";
import * as React from "react";
import { Logo } from "@/components/logo";
import { NavMain } from "@/components/sidebar/nav-main";
import { NavSecondary } from "@/components/sidebar/nav-secondary";
import { NavUser } from "@/components/sidebar/nav-user";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/components/ui/sidebar";
import { createSidebarNavData, type PagadorLike } from "./nav-link";
type AppUser = {
id: string;
name: string;
email: string;
image: string | null;
};
interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
user: AppUser;
pagadorAvatarUrl: string | null;
pagadores: PagadorLike[];
preLancamentosCount?: number;
}
export function AppSidebar({
user,
pagadorAvatarUrl,
pagadores,
preLancamentosCount = 0,
...props
}: AppSidebarProps) {
if (!user) {
throw new Error("AppSidebar requires a user but received undefined.");
}
const navigation = React.useMemo(
() => createSidebarNavData({ pagadores, preLancamentosCount }),
[pagadores, preLancamentosCount],
);
return (
<Sidebar collapsible="icon" {...props}>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton
asChild
className="data-[slot=sidebar-menu-button]:px-1.5! hover:bg-transparent active:bg-transparent pt-8 py-6 justify-center hover:scale-120 scale-110 transition-all duration-200"
>
<a href="/dashboard">
<LogoContent />
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<NavMain sections={navigation.navMain} />
<NavSecondary items={navigation.navSecondary} className="mt-auto" />
</SidebarContent>
<SidebarFooter>
<NavUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
</SidebarFooter>
</Sidebar>
);
}
function LogoContent() {
const { state } = useSidebar();
const isCollapsed = state === "collapsed";
return (
<Logo variant={isCollapsed ? "small" : "full"} showVersion={!isCollapsed} />
);
}