sem clerk

This commit is contained in:
2026-03-14 21:12:25 -03:00
parent 286867739d
commit e126b0d3f9

View File

@@ -4,12 +4,9 @@ import { TeamPresence } from './TeamPresence';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { Menu, X, FolderOpen, Layers, ClipboardCheck, LogOut, TrendingUp, Sun, Moon, HelpCircle, Shield, Wrench, Terminal, LayoutDashboard, Package, Thermometer } from 'lucide-react';
import { clsx } from 'clsx';
import { useClerk, UserButton, useUser, OrganizationSwitcher, useOrganization } from '@clerk/clerk-react';
import { TechnicalManual } from './TechnicalManual';
import { useAuth } from '../context/useAuth';
import { TechnicalManual } from './TechnicalManual';
// import { useSystemSettings } from '../context/SystemSettingsContext';
import { setApiOrgData } from '../services/api';
interface LayoutProps {
children: React.ReactNode;
}
@@ -22,22 +19,9 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
return saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
});
const location = useLocation();
const { signOut } = useClerk();
const { user } = useUser();
const { organization } = useOrganization();
const { isAdmin, isUser, isDeveloper, appUser } = useAuth();
const { isAdmin, isUser, isDeveloper, appUser, logout } = useAuth();
// const { settings } = useSystemSettings();
// Sync Organization ID with API client
React.useEffect(() => {
if (organization?.id) {
setApiOrgData(organization.id, organization.name);
} else {
setApiOrgData(null);
}
}, [organization]);
// Helper to get role display name
const getRoleDisplay = () => {
switch (appUser?.role) {
@@ -118,44 +102,15 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
</div>
<div className="px-6 mb-2">
{isAdmin() ? (
<OrganizationSwitcher
hidePersonal={true}
afterSelectOrganizationUrl="/"
afterCreateOrganizationUrl="/"
afterLeaveOrganizationUrl="/"
appearance={{
elements: {
rootBox: "w-full",
organizationSwitcherTrigger: "w-full justify-between bg-surface-hover/50 hover:bg-surface-hover p-2 rounded-xl border border-border/50 text-text-main transition-all",
organizationPreviewTextContainer: "text-text-main",
organizationPreviewMainIdentifier: "text-text-main font-semibold",
organizationSwitcherPopoverCard: "bg-surface border border-border/40 shadow-2xl",
organizationSwitcherPopoverActions: "bg-surface-soft/50",
organizationSwitcherPopoverActionButton: "text-text-main hover:bg-surface-hover transition-colors",
organizationPreview: "hover:bg-surface-hover cursor-pointer transition-colors px-4 py-3",
organizationPreviewSecondaryIdentifier: "text-text-muted",
organizationSwitcherPopoverFooter: "hidden",
userPreviewMainIdentifier: "text-text-main font-bold",
userPreviewSecondaryIdentifier: "text-text-muted",
}
}}
/>
) : (
<div className="w-full flex items-center gap-3 p-2 rounded-xl border border-border/50 bg-surface-hover/50 text-text-main opacity-80 cursor-default" title="Apenas visualização">
{organization?.imageUrl ? (
<img src={organization.imageUrl} alt={organization.name} className="w-8 h-8 rounded-lg object-cover bg-surface-soft" />
) : (
<div className="w-full flex items-center gap-3 p-2 rounded-xl border border-border/50 bg-surface-hover/50 text-text-main opacity-80 cursor-default" title="Organização">
<div className="w-8 h-8 rounded-lg bg-surface-soft flex items-center justify-center font-bold text-xs">
{organization?.name?.substring(0, 2).toUpperCase()}
ORG
</div>
)}
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold truncate">{organization?.name || 'Carregando...'}</p>
<p className="text-[10px] text-text-muted uppercase tracking-wider">Organização</p>
<p className="text-sm font-semibold truncate">Organização Matriz</p>
<p className="text-[10px] text-text-muted uppercase tracking-wider">Conta</p>
</div>
</div>
)}
</div>
{/* Team Presence - Shows all members with online/offline status */}
@@ -257,7 +212,7 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
</button>
<button
onClick={() => signOut()}
onClick={() => logout()}
className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-text-secondary hover:text-error hover:bg-error/5 transition-all w-full"
>
<LogOut size={18} />
@@ -268,9 +223,11 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
<div className="flex items-center gap-2">
<NotificationBell />
<div className="w-px h-6 bg-border/50 mx-1"></div>
<UserButton afterSignOutUrl="/" />
<div className="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center font-bold text-xs">
{appUser?.name?.substring(0, 2).toUpperCase() || 'US'}
</div>
<div className="flex flex-col">
<span className="text-[10px] text-text-main font-bold truncate max-w-[100px]">{user?.firstName || 'Usuário'}</span>
<span className="text-[10px] text-text-main font-bold truncate max-w-[100px]">{appUser?.name || 'Usuário'}</span>
<span className="text-[8px] text-text-muted">v2.1.0</span>
</div>
</div>