@tleblancureta/proto 0.1.1 → 0.2.0

package/core-web/src/ProtoApp.tsx

@@ -18,7 +18,9 @@
  *   }
  */
 import { useState, useCallback, useRef, useMemo } from 'react'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import Shell, { type CockpitDefinition } from './components/Shell.js'
+import { AdminPanel } from './components/admin/AdminPanel.js'
 import { useAuth } from './hooks/useAuth.js'
 import { useTheme } from './hooks/useTheme.js'
 import { buildWidgetRegistry, type WidgetDefinition } from './lib/define-widget.js'
@@ -64,7 +66,7 @@ export function ProtoApp({
 }: ProtoAppProps) {
   useTheme()
 
-  const { user, companyId, companies, profile, loading, signOut, setCompanyId } = useAuth()
+  const { user, role, companyId, companies, profile, loading, signOut, setCompanyId } = useAuth()
   const [refreshKey, setRefreshKey] = useState(0)
   const chatSendRef = useRef<((msg: string) => void) | null>(null)
 
@@ -140,24 +142,32 @@ export function ProtoApp({
   const effectiveCompanyId = companyId || user.id
 
   return (
-    <Shell
-      widgets={widgetRegistry}
-      defaultWidgets={defaultWidgets}
-      defaultLayouts={defaultLayouts}
-      cockpits={cockpits}
-      companyId={effectiveCompanyId}
-      refreshKey={refreshKey}
-      onSendToChat={onSendToChat}
-      activeEntity={activeEntity}
-      onActivateEntity={activateEntity}
-      onDeactivateEntity={() => setActiveEntity(null)}
-      openEntities={openEntities}
-      onCloseTab={closeEntityTab}
-      companies={companies}
-      effectiveCompanyId={effectiveCompanyId}
-      setCompanyId={setCompanyId}
-      onSignOut={signOut}
-      userEmail={profile?.full_name || user.email || ''}
-    />
+    <BrowserRouter>
+      <Routes>
+        <Route path="/admin" element={<AdminPanel widgets={widgetRegistry} />} />
+        <Route path="*" element={
+          <Shell
+            widgets={widgetRegistry}
+            defaultWidgets={defaultWidgets}
+            defaultLayouts={defaultLayouts}
+            cockpits={cockpits}
+            companyId={effectiveCompanyId}
+            refreshKey={refreshKey}
+            onSendToChat={onSendToChat}
+            activeEntity={activeEntity}
+            onActivateEntity={activateEntity}
+            onDeactivateEntity={() => setActiveEntity(null)}
+            openEntities={openEntities}
+            onCloseTab={closeEntityTab}
+            role={role}
+            companies={companies}
+            effectiveCompanyId={effectiveCompanyId}
+            setCompanyId={setCompanyId}
+            onSignOut={signOut}
+            userEmail={profile?.full_name || user.email || ''}
+          />
+        } />
+      </Routes>
+    </BrowserRouter>
   )
 }

package/core-web/src/components/Shell.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, useMemo, type ReactNode } from 'react'
-import { useMountEffect } from '../hooks/useMountEffect'
+import { useMountEffect } from '../hooks/useMountEffect.js'
 import { ResponsiveGridLayout, type Layout } from 'react-grid-layout'
 import 'react-grid-layout/css/styles.css'
 import { XIcon } from 'lucide-react'
@@ -8,7 +8,7 @@ import { Toolbar } from './shell/Toolbar.js'
 import { FocusView } from './shell/FocusView.js'
 import { EmptyState } from './shell/EmptyState.js'
 import type { ActiveEntity, WidgetInstance, WidgetType } from './shell/types.js'
-import type { ShellContext, WidgetRegistry } from '../lib/define-widget'
+import type { ShellContext, WidgetRegistry } from '../lib/define-widget.js'
 
 export type { WidgetType, ActiveEntity } from './shell/types.js'
 

package/core-web/src/components/admin/AdminPanel.tsx

@@ -0,0 +1,285 @@
+import { useState, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../../hooks/useAuth.js'
+import { useData } from '../../hooks/useData.js'
+import { useTheme } from '../../hooks/useTheme.js'
+import { supabase } from '../../lib/supabase.js'
+import { Button } from '../ui/button.js'
+import {
+  ArrowLeftIcon, UsersIcon, Building2Icon, WrenchIcon,
+  LayoutGridIcon, SearchIcon,
+} from 'lucide-react'
+import { SystemTab } from './SystemTab.js'
+import type { WidgetRegistry } from '../../lib/define-widget.js'
+
+type Tab = 'users' | 'companies' | 'widgets' | 'system'
+
+interface AdminPanelProps {
+  widgets?: WidgetRegistry
+}
+
+export function AdminPanel({ widgets }: AdminPanelProps) {
+  useTheme()
+  const navigate = useNavigate()
+  const { role, loading } = useAuth()
+  const [activeTab, setActiveTab] = useState<Tab>('users')
+
+  if (loading) {
+    return <div className="flex h-screen items-center justify-center text-muted-foreground">Loading...</div>
+  }
+
+  if (role !== 'admin') {
+    return (
+      <div className="flex h-screen items-center justify-center text-muted-foreground">
+        No tienes acceso a esta seccion.
+      </div>
+    )
+  }
+
+  const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
+    { id: 'users', label: 'Usuarios', icon: <UsersIcon className="w-4 h-4" /> },
+    { id: 'companies', label: 'Empresas', icon: <Building2Icon className="w-4 h-4" /> },
+    { id: 'widgets', label: 'Widgets', icon: <LayoutGridIcon className="w-4 h-4" /> },
+    { id: 'system', label: 'Sistema', icon: <WrenchIcon className="w-4 h-4" /> },
+  ]
+
+  return (
+    <div className="h-screen flex flex-col bg-background text-foreground">
+      <div className="border-b border-border px-4 py-3 flex items-center gap-3 bg-background/80 backdrop-blur">
+        <Button variant="ghost" size="sm" className="h-8 gap-1.5" onClick={() => navigate('/')}>
+          <ArrowLeftIcon className="w-4 h-4" /> Shell
+        </Button>
+        <div className="h-4 w-px bg-border" />
+        <h1 className="text-sm font-semibold">Admin</h1>
+      </div>
+
+      <div className="flex flex-1 overflow-hidden">
+        <nav className="w-48 border-r border-border p-2 flex flex-col gap-0.5 shrink-0">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors ${
+                activeTab === tab.id
+                  ? 'bg-accent text-foreground font-medium'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+              }`}
+            >
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+
+        <main className="flex-1 overflow-y-auto p-6">
+          {activeTab === 'users' && <UsersTab />}
+          {activeTab === 'companies' && <CompaniesTab />}
+          {activeTab === 'widgets' && <WidgetsTab widgets={widgets} />}
+          {activeTab === 'system' && <SystemTab />}
+        </main>
+      </div>
+    </div>
+  )
+}
+
+/* ── Users Tab ─────────────────────────────────────────── */
+
+function UsersTab() {
+  const [search, setSearch] = useState('')
+
+  const { data: users } = useData(async () => {
+    const { data: profiles } = await supabase
+      .from('profiles')
+      .select('id, full_name, role_title, onboarding_completed')
+      .order('full_name')
+    if (!profiles) return []
+
+    const { data: companies } = await supabase
+      .from('companies')
+      .select('id, name, owner_id')
+
+    const { data: memberships } = await supabase
+      .from('company_users')
+      .select('user_id, company_id')
+
+    return profiles.map((p: any) => {
+      const owned = (companies || []).filter((c: any) => c.owner_id === p.id)
+      const memberOf = (memberships || [])
+        .filter((m: any) => m.user_id === p.id)
+        .map((m: any) => (companies || []).find((c: any) => c.id === m.company_id))
+        .filter(Boolean)
+      return {
+        ...p,
+        role: owned.length > 0 ? 'admin' : memberOf.length > 0 ? 'client' : 'none',
+        companies: owned.length > 0 ? owned : memberOf,
+      }
+    })
+  }, [], [])
+
+  const filtered = useMemo(() => {
+    if (!search) return users
+    const q = search.toLowerCase()
+    return users.filter((u: any) =>
+      u.full_name?.toLowerCase().includes(q) ||
+      u.role_title?.toLowerCase().includes(q) ||
+      u.role?.includes(q)
+    )
+  }, [users, search])
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold">Usuarios</h2>
+        <div className="relative">
+          <SearchIcon className="w-4 h-4 absolute left-2.5 top-2.5 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Buscar..."
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            className="pl-8 pr-3 py-2 text-sm bg-background border border-border rounded-md w-60 focus:outline-none focus:ring-1 focus:ring-primary"
+          />
+        </div>
+      </div>
+      <div className="border border-border rounded-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-muted/50 border-b border-border">
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Nombre</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Cargo</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Rol</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Empresa</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Onboarding</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.map((u: any) => (
+              <tr key={u.id} className="border-b border-border/50 hover:bg-accent/30 transition-colors">
+                <td className="px-4 py-2.5">{u.full_name || <span className="text-muted-foreground italic">Sin nombre</span>}</td>
+                <td className="px-4 py-2.5 text-muted-foreground">{u.role_title || '—'}</td>
+                <td className="px-4 py-2.5"><RoleBadge role={u.role} /></td>
+                <td className="px-4 py-2.5 text-muted-foreground">
+                  {u.companies.map((c: any) => c.name).join(', ') || '—'}
+                </td>
+                <td className="px-4 py-2.5">
+                  {u.onboarding_completed
+                    ? <span className="text-green-600 dark:text-green-400">Completo</span>
+                    : <span className="text-amber-600 dark:text-amber-400">Pendiente</span>}
+                </td>
+              </tr>
+            ))}
+            {filtered.length === 0 && (
+              <tr><td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">No hay usuarios</td></tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <p className="text-xs text-muted-foreground mt-2">{users.length} usuarios total</p>
+    </div>
+  )
+}
+
+/* ── Companies Tab ─────────────────────────────────────── */
+
+function CompaniesTab() {
+  const { data: companies } = useData(async () => {
+    const { data } = await supabase
+      .from('companies')
+      .select('id, name, owner_id, created_at')
+      .order('name')
+    if (!data) return []
+
+    const { data: profiles } = await supabase.from('profiles').select('id, full_name')
+    const { data: memberships } = await supabase.from('company_users').select('company_id, user_id')
+
+    return data.map((c: any) => ({
+      ...c,
+      owner_name: (profiles || []).find((p: any) => p.id === c.owner_id)?.full_name || '—',
+      member_count: (memberships || []).filter((m: any) => m.company_id === c.id).length,
+    }))
+  }, [], [])
+
+  return (
+    <div>
+      <h2 className="text-lg font-semibold mb-4">Empresas</h2>
+      <div className="border border-border rounded-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-muted/50 border-b border-border">
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Nombre</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Owner</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Miembros</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Creada</th>
+            </tr>
+          </thead>
+          <tbody>
+            {companies.map((c: any) => (
+              <tr key={c.id} className="border-b border-border/50 hover:bg-accent/30 transition-colors">
+                <td className="px-4 py-2.5 font-medium">{c.name}</td>
+                <td className="px-4 py-2.5 text-muted-foreground">{c.owner_name}</td>
+                <td className="px-4 py-2.5 text-muted-foreground">{c.member_count}</td>
+                <td className="px-4 py-2.5 text-muted-foreground">
+                  {new Date(c.created_at).toLocaleDateString()}
+                </td>
+              </tr>
+            ))}
+            {companies.length === 0 && (
+              <tr><td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">No hay empresas</td></tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <p className="text-xs text-muted-foreground mt-2">{companies.length} empresas total</p>
+    </div>
+  )
+}
+
+/* ── Widgets Tab ───────────────────────────────────────── */
+
+function WidgetsTab({ widgets }: { widgets?: WidgetRegistry }) {
+  const entries = useMemo(() => {
+    if (!widgets) return []
+    return Array.from(widgets.values()).map(w => ({
+      type: w.type, title: w.title, icon: w.icon || '▦', category: w.category || 'general',
+    }))
+  }, [widgets])
+
+  return (
+    <div>
+      <h2 className="text-lg font-semibold mb-4">Widgets registrados</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        {entries.map(w => (
+          <div key={w.type} className="border border-border rounded-lg p-4 hover:bg-accent/30 transition-colors">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-lg">{w.icon}</span>
+              <span className="font-medium text-sm">{w.title}</span>
+            </div>
+            <div className="flex items-center gap-2 mt-2">
+              <span className="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground">{w.type}</span>
+              <span className="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground">{w.category}</span>
+            </div>
+          </div>
+        ))}
+        {entries.length === 0 && (
+          <p className="text-muted-foreground text-sm col-span-3">No hay widgets registrados</p>
+        )}
+      </div>
+      <p className="text-xs text-muted-foreground mt-3">{entries.length} widgets total</p>
+    </div>
+  )
+}
+
+/* ── Shared ────────────────────────────────────────────── */
+
+function RoleBadge({ role }: { role: string }) {
+  const styles: Record<string, string> = {
+    admin: 'bg-primary/10 text-primary border-primary/20',
+    client: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20',
+    none: 'bg-muted text-muted-foreground border-border',
+  }
+  return (
+    <span className={`text-xs px-2 py-0.5 rounded-full border ${styles[role] || styles.none}`}>
+      {role}
+    </span>
+  )
+}

package/core-web/src/components/admin/SystemTab.tsx

@@ -0,0 +1,167 @@
+import { useData } from '../../hooks/useData.js'
+import { GATEWAY_URL, INTERNAL_SECRET } from '../../lib/config.js'
+import {
+  WrenchIcon, BoxIcon, GitBranchIcon, BookOpenIcon,
+} from 'lucide-react'
+
+interface McpMeta {
+  tools: { name: string; description: string }[]
+  entities: { name: string; table: string }[]
+  workflows: { name: string; entityTable: string; phases: string[] }[]
+  skills: { name: string; description: string | null; mcp_tools: string[] }[]
+}
+
+export function SystemTab() {
+  const { data: meta } = useData<McpMeta | null>(async () => {
+    try {
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+      if (INTERNAL_SECRET) headers['X-Internal-Secret'] = INTERNAL_SECRET
+      const res = await fetch(`${GATEWAY_URL}/admin/meta`, { headers })
+      if (!res.ok) return null
+      return res.json()
+    } catch {
+      return null
+    }
+  }, [], null)
+
+  if (!meta) {
+    return (
+      <div>
+        <h2 className="text-lg font-semibold mb-4">Sistema</h2>
+        <p className="text-muted-foreground text-sm">
+          No se pudo conectar al gateway. Asegurate de que esta corriendo y que el endpoint <code>/admin/meta</code> esta disponible.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Tools */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <WrenchIcon className="w-4 h-4 text-muted-foreground" />
+          <h2 className="text-lg font-semibold">Tools</h2>
+          <span className="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground">{meta.tools.length}</span>
+        </div>
+        <div className="border border-border rounded-lg overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="bg-muted/50 border-b border-border">
+                <th className="text-left px-4 py-2 font-medium text-muted-foreground">Nombre</th>
+                <th className="text-left px-4 py-2 font-medium text-muted-foreground">Descripcion</th>
+              </tr>
+            </thead>
+            <tbody>
+              {meta.tools.map(t => (
+                <tr key={t.name} className="border-b border-border/50 hover:bg-accent/30 transition-colors">
+                  <td className="px-4 py-2 font-mono text-xs">{t.name}</td>
+                  <td className="px-4 py-2 text-muted-foreground">{t.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Entities */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <BoxIcon className="w-4 h-4 text-muted-foreground" />
+          <h2 className="text-lg font-semibold">Entities</h2>
+          <span className="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground">{meta.entities.length}</span>
+        </div>
+        {meta.entities.length > 0 ? (
+          <div className="border border-border rounded-lg overflow-hidden">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="bg-muted/50 border-b border-border">
+                  <th className="text-left px-4 py-2 font-medium text-muted-foreground">Nombre</th>
+                  <th className="text-left px-4 py-2 font-medium text-muted-foreground">Tabla</th>
+                </tr>
+              </thead>
+              <tbody>
+                {meta.entities.map((e: any) => (
+                  <tr key={e.name} className="border-b border-border/50 hover:bg-accent/30 transition-colors">
+                    <td className="px-4 py-2 font-medium">{e.name}</td>
+                    <td className="px-4 py-2 font-mono text-xs text-muted-foreground">{e.table}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">No hay entities definidas</p>
+        )}
+      </section>
+
+      {/* Workflows */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <GitBranchIcon className="w-4 h-4 text-muted-foreground" />
+          <h2 className="text-lg font-semibold">Workflows</h2>
+          <span className="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground">{meta.workflows.length}</span>
+        </div>
+        {meta.workflows.length > 0 ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {meta.workflows.map((w: any) => (
+              <div key={w.name} className="border border-border rounded-lg p-4">
+                <div className="font-medium text-sm mb-1">{w.name}</div>
+                <div className="text-xs text-muted-foreground mb-2">Tabla: <code>{w.entityTable}</code></div>
+                <div className="flex flex-wrap gap-1">
+                  {w.phases.map((p: string, i: number) => (
+                    <span key={p} className="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground flex items-center gap-1">
+                      {i > 0 && <span className="text-muted-foreground/40">&rarr;</span>}
+                      {p}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">No hay workflows definidos</p>
+        )}
+      </section>
+
+      {/* Skills */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <BookOpenIcon className="w-4 h-4 text-muted-foreground" />
+          <h2 className="text-lg font-semibold">Skills</h2>
+          <span className="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground">{meta.skills.length}</span>
+        </div>
+        {meta.skills.length > 0 ? (
+          <div className="border border-border rounded-lg overflow-hidden">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="bg-muted/50 border-b border-border">
+                  <th className="text-left px-4 py-2 font-medium text-muted-foreground">Nombre</th>
+                  <th className="text-left px-4 py-2 font-medium text-muted-foreground">Descripcion</th>
+                  <th className="text-left px-4 py-2 font-medium text-muted-foreground">Tools</th>
+                </tr>
+              </thead>
+              <tbody>
+                {meta.skills.map((s: any) => (
+                  <tr key={s.name} className="border-b border-border/50 hover:bg-accent/30 transition-colors">
+                    <td className="px-4 py-2 font-medium">{s.name}</td>
+                    <td className="px-4 py-2 text-muted-foreground">{s.description || '—'}</td>
+                    <td className="px-4 py-2">
+                      <div className="flex flex-wrap gap-1">
+                        {s.mcp_tools.map((t: string) => (
+                          <span key={t} className="text-xs px-1.5 py-0.5 bg-muted rounded text-muted-foreground font-mono">{t}</span>
+                        ))}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">No hay skills cargados</p>
+        )}
+      </section>
+    </div>
+  )
+}

package/core-web/src/components/shell/EmptyState.tsx

@@ -1,5 +1,5 @@
 import { PlusIcon } from 'lucide-react'
-import { Button } from '../ui/button'
+import { Button } from '../ui/button.js'
 import type { WidgetType } from './types.js'
 
 interface CatalogEntry {

package/core-web/src/components/shell/FocusView.tsx

@@ -1,5 +1,5 @@
 import { XIcon, SparklesIcon } from 'lucide-react'
-import { Generative } from '../widgets/agent/Generative'
+import { Generative } from '../widgets/agent/Generative.js'
 import type { WidgetInstance } from './types.js'
 
 interface Props {

package/core-web/src/components/shell/Toolbar.tsx

@@ -1,8 +1,9 @@
 import { useState, useCallback, type ReactNode } from 'react'
-import { useMountEffect } from '../../hooks/useMountEffect'
-import { Button } from '../ui/button'
-import { PlusIcon, RotateCcwIcon, SunIcon, MoonIcon, MonitorIcon, UserIcon, LogOutIcon, Building2Icon, ChevronDownIcon, CheckIcon, XIcon, HomeIcon, SettingsIcon, LayoutGridIcon } from 'lucide-react'
-import { useTheme, type Theme } from '../../hooks/useTheme'
+import { useNavigate } from 'react-router-dom'
+import { useMountEffect } from '../../hooks/useMountEffect.js'
+import { Button } from '../ui/button.js'
+import { PlusIcon, RotateCcwIcon, SunIcon, MoonIcon, MonitorIcon, UserIcon, LogOutIcon, Building2Icon, ChevronDownIcon, CheckIcon, XIcon, HomeIcon, SettingsIcon, LayoutGridIcon, ShieldIcon } from 'lucide-react'
+import { useTheme, type Theme } from '../../hooks/useTheme.js'
 import type { ActiveEntity, WidgetType } from './types.js'
 
 interface CatalogEntry {
@@ -55,6 +56,7 @@ export function Toolbar({
     document.addEventListener('keydown', handler)
     return () => document.removeEventListener('keydown', handler)
   })
+  const navigate = useNavigate()
   const currentCompany = companies?.find(c => c.id === effectiveCompanyId)
 
   return (
@@ -197,6 +199,14 @@ export function Toolbar({
                       <SettingsIcon className="w-3.5 h-3.5" /> Configuracion
                     </button>
                   )}
+                  {role === 'admin' && (
+                    <button
+                      onClick={() => { setOpenDropdown(null); navigate('/admin') }}
+                      className="w-full text-left px-3 py-1.5 text-sm rounded hover:bg-accent transition-colors flex items-center gap-2"
+                    >
+                      <ShieldIcon className="w-3.5 h-3.5" /> Admin
+                    </button>
+                  )}
                   <ThemeToggleRow />
                   <div className="border-t border-border/50 mt-1 pt-1">
                     <button

package/core-web/src/components/ui/avatar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.js'
 
 const Avatar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (

package/core-web/src/components/ui/badge.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.js'
 
 const variantStyles = {
   default: 'bg-primary text-primary-foreground',

package/core-web/src/components/ui/button.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.js'
 
 const variantStyles = {
   default: 'bg-primary text-primary-foreground hover:bg-primary/90',

package/core-web/src/components/ui/card.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.js'
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (

package/core-web/src/components/ui/input.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.js'
 
 const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
   ({ className, type, ...props }, ref) => (

package/core-web/src/components/ui/scroll-area.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.js'
 
 const ScrollArea = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => (

package/core-web/src/components/ui/separator.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.js'
 
 interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
   orientation?: 'horizontal' | 'vertical'

package/core-web/src/components/ui/shell-dialog.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { XIcon } from 'lucide-react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.js'
 
 interface ShellDialogProps {
   open: boolean