rodrigo/budget-view-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Resolve blank screen issue

Browse Source 
Investigate and fix the issue causing the app to display a blank screen.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-02 05:29:39 +00:00
parent b18ebd96c7
commit bc075c8fff
1 changed files with 119 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
src/components/layout/NewModernLayout.tsx
View File

@ -59,18 +59,10 @@ const Logo = () => {
);
};
export default function NewModernLayout({ children }: NewModernLayoutProps) {
const SidebarContent = () => {
const location = useLocation();
const { toggleSidebar } = useSidebar();
const {
isOpen: tourOpen,
currentStep,
nextStep,
skipTour,
closeTour
} = useOnboardingTour();
const mainItems = [
{
title: "Dashboard",
@ -131,107 +123,131 @@ export default function NewModernLayout({ children }: NewModernLayoutProps) {
}
];
return (
<>
<SidebarHeader>
<Logo />
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Principal</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{mainItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
tooltip={item.title}
isActive={location.pathname === item.url}
>
<Link to={item.url}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>WhatsApp</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{whatsappItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
tooltip={item.title}
isActive={location.pathname === item.url}
>
<Link to={item.url} data-tour={item['data-tour']}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarGroup>
<SidebarMenu>
{configItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
tooltip={item.title}
isActive={location.pathname === item.url}
>
<Link to={item.url}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroup>
</SidebarFooter>
</>
);
};
const HeaderContent = () => {
const { toggleSidebar } = useSidebar();
return (
<div className="sticky top-0 z-50 flex h-16 shrink-0 items-center gap-2 border-b px-4 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
<div className="flex items-center gap-2">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<SidebarTrigger className="-ml-1 hover:bg-blue-50 rounded-lg p-2" />
</TooltipTrigger>
<TooltipContent>
<p>Abrir/Fechar Menu</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<span
className="text-sm font-medium text-gray-600 cursor-pointer hover:text-blue-600 transition-colors"
onClick={toggleSidebar}
>
Menu
</span>
</div>
<div className="ml-auto">
<UserProfileButton />
</div>
</div>
);
};
export default function NewModernLayout({ children }: NewModernLayoutProps) {
const {
isOpen: tourOpen,
currentStep,
nextStep,
skipTour,
closeTour
} = useOnboardingTour();
return (
<div className="min-h-screen bg-background flex w-full">
<SidebarProvider defaultOpen={false}>
<Sidebar>
<SidebarHeader>
<Logo />
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Principal</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{mainItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
tooltip={item.title}
isActive={location.pathname === item.url}
>
<Link to={item.url}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>WhatsApp</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{whatsappItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
tooltip={item.title}
isActive={location.pathname === item.url}
>
<Link to={item.url} data-tour={item['data-tour']}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarGroup>
<SidebarMenu>
{configItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
tooltip={item.title}
isActive={location.pathname === item.url}
>
<Link to={item.url}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroup>
</SidebarFooter>
<SidebarContent />
</Sidebar>
<SidebarInset className="flex-1">
<div className="sticky top-0 z-50 flex h-16 shrink-0 items-center gap-2 border-b px-4 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
<div className="flex items-center gap-2">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<SidebarTrigger className="-ml-1 hover:bg-blue-50 rounded-lg p-2" />
</TooltipTrigger>
<TooltipContent>
<p>Abrir/Fechar Menu</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<span
className="text-sm font-medium text-gray-600 cursor-pointer hover:text-blue-600 transition-colors"
onClick={toggleSidebar}
>
Menu
</span>
</div>
<div className="ml-auto">
<UserProfileButton />
</div>
</div>
<HeaderContent />
<main className="flex-1 overflow-y-auto">
<div className="container mx-auto px-4 py-6">
{children}