mirror of
https://github.com/domfelipe/mika-agent-assist.git
synced 2026-08-07 14:16:50 +00:00
Changes
Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
parent
fa8bee0e36
commit
104dd8af7e
12 changed files with 1428 additions and 50 deletions
237
src/routes/painel.tsx
Normal file
237
src/routes/painel.tsx
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
"use client";
|
||||
|
||||
import { createFileRoute, Outlet, redirect, Link, useNavigate, useLocation } from "@tanstack/react-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Bot,
|
||||
CreditCard,
|
||||
Home,
|
||||
LogOut,
|
||||
Menu,
|
||||
Plug,
|
||||
Settings,
|
||||
Sparkles,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { useProfile } from "@/hooks/use-profile";
|
||||
import { Logo } from "@/components/mika/Logo";
|
||||
import { ThemeToggle } from "@/components/mika/ThemeToggle";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/components/ui/sheet";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const Route = createFileRoute("/painel")({
|
||||
beforeLoad: () => {
|
||||
// Auth real é validada client-side abaixo (Supabase usa localStorage).
|
||||
// Mantemos beforeLoad como hook para futuro SSR auth.
|
||||
},
|
||||
component: PainelLayout,
|
||||
});
|
||||
|
||||
interface NavItem {
|
||||
to: "/painel" | "/painel/faturamento" | "/painel/configuracoes";
|
||||
label: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface DisabledNavItem {
|
||||
to: null;
|
||||
label: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
disabled: true;
|
||||
}
|
||||
|
||||
const NAV: (NavItem | DisabledNavItem)[] = [
|
||||
{ to: "/painel", label: "Dashboard", icon: Home },
|
||||
{ to: null, label: "Meu Agente", icon: Bot, disabled: true },
|
||||
{ to: null, label: "Skills", icon: Sparkles, disabled: true },
|
||||
{ to: null, label: "Integrações", icon: Plug, disabled: true },
|
||||
{ to: "/painel/faturamento", label: "Faturamento", icon: CreditCard },
|
||||
{ to: "/painel/configuracoes", label: "Configurações", icon: Settings },
|
||||
];
|
||||
|
||||
function PainelLayout() {
|
||||
const { user, loading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) {
|
||||
navigate({ to: "/login", search: { redirect: location.pathname } });
|
||||
}
|
||||
}, [loading, user, navigate, location.pathname]);
|
||||
|
||||
if (loading || !user) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
||||
<div className="h-8 w-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="min-h-screen flex bg-background">
|
||||
<DesktopSidebar />
|
||||
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<header className="h-16 border-b border-border bg-card/50 backdrop-blur-sm flex items-center justify-between px-4 sm:px-6 sticky top-0 z-30">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="lg:hidden" aria-label="Abrir menu">
|
||||
<Menu className="h-5 w-5" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="w-72 p-0">
|
||||
<SheetHeader className="p-4 border-b">
|
||||
<SheetTitle><Logo /></SheetTitle>
|
||||
</SheetHeader>
|
||||
<SidebarNav onNavigate={() => setMobileOpen(false)} />
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<div className="lg:hidden"><Logo /></div>
|
||||
</div>
|
||||
|
||||
<UserMenu />
|
||||
</header>
|
||||
|
||||
<main className="flex-1 px-4 sm:px-6 py-6 sm:py-8">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function DesktopSidebar() {
|
||||
return (
|
||||
<aside className="hidden lg:flex w-64 flex-col border-r border-border bg-sidebar shrink-0">
|
||||
<div className="h-16 px-6 flex items-center border-b border-border">
|
||||
<Link to="/" aria-label="Início"><Logo /></Link>
|
||||
</div>
|
||||
<SidebarNav />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarNav({ onNavigate }: { onNavigate?: () => void } = {}) {
|
||||
const location = useLocation();
|
||||
return (
|
||||
<nav className="flex-1 p-3 space-y-1" aria-label="Navegação do painel">
|
||||
{NAV.map((item) => {
|
||||
const Icon = item.icon;
|
||||
if (item.disabled) {
|
||||
return (
|
||||
<Tooltip key={item.label} delayDuration={150}>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-muted-foreground/60 cursor-not-allowed">
|
||||
<Icon className="h-4 w-4" />
|
||||
{item.label}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">Em breve</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
const active = location.pathname === item.to ||
|
||||
(item.to !== "/painel" && location.pathname.startsWith(item.to));
|
||||
return (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
onClick={onNavigate}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
|
||||
active
|
||||
? "bg-primary/10 text-primary"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
function UserMenu() {
|
||||
const { user } = useAuth();
|
||||
const { data: profile } = useProfile();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const initials = (profile?.full_name || user?.email || "U")
|
||||
.split(" ")
|
||||
.map((s) => s[0])
|
||||
.slice(0, 2)
|
||||
.join("")
|
||||
.toUpperCase();
|
||||
|
||||
const signOut = async () => {
|
||||
await supabase.auth.signOut();
|
||||
navigate({ to: "/" });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="rounded-full p-1 h-auto" aria-label="Menu do usuário">
|
||||
<Avatar className="h-8 w-8">
|
||||
{profile?.avatar_url && <AvatarImage src={profile.avatar_url} alt="" />}
|
||||
<AvatarFallback className="bg-primary/10 text-primary text-xs font-semibold">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="text-sm font-semibold">{profile?.full_name || "Usuário"}</div>
|
||||
<div className="text-xs text-muted-foreground truncate">{user?.email}</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/painel/configuracoes" className="cursor-pointer">
|
||||
<User className="h-4 w-4 mr-2" /> Perfil
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={signOut} className="cursor-pointer text-destructive focus:text-destructive">
|
||||
<LogOut className="h-4 w-4 mr-2" /> Sair
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue