feat: add multi-tenant client management for admins
- Add tenants API endpoints (list, get, create) - Add tenant middleware override via X-View-Tenant header - Add TenantSelector dropdown component in header - Add tenant view store with persistence - Add Clientes management page - Update all navigation layouts with Clientes link for admins Admins can now: - View list of all clients - Create new clients with automatic schema setup - Switch between viewing different clients' data - See which client they are currently viewing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import { useThemeStore } from '@/stores/theme-store';
|
||||
import { themes, type ThemeName } from '@/themes';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { TenantSelector } from '@/components/tenant-selector';
|
||||
import { Sun, Moon, Palette } from 'lucide-react';
|
||||
|
||||
const themeIcons: Record<ThemeName, React.ReactNode> = {
|
||||
@@ -27,7 +28,8 @@ export function Header({ title }: { title: string }) {
|
||||
<header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-background/95 backdrop-blur px-6">
|
||||
<h1 className="text-xl font-semibold">{title}</h1>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<TenantSelector />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
Calendar,
|
||||
Bell,
|
||||
Users,
|
||||
Building2,
|
||||
} from 'lucide-react';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { logout } from '@/lib/api/auth';
|
||||
@@ -30,12 +31,20 @@ const navigation = [
|
||||
{ name: 'Configuración', href: '/configuracion', icon: Settings },
|
||||
];
|
||||
|
||||
const adminNavigation = [
|
||||
{ name: 'Clientes', href: '/clientes', icon: Building2 },
|
||||
];
|
||||
|
||||
export function SidebarCompact() {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { user, logout: clearAuth } = useAuthStore();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const allNavigation = user?.role === 'admin'
|
||||
? [...navigation.slice(0, -1), ...adminNavigation, navigation[navigation.length - 1]]
|
||||
: navigation;
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await logout();
|
||||
@@ -74,7 +83,7 @@ export function SidebarCompact() {
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 space-y-1 px-2 py-3">
|
||||
{navigation.map((item) => {
|
||||
{allNavigation.map((item) => {
|
||||
const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||||
return (
|
||||
<Link
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
Calendar,
|
||||
Bell,
|
||||
Users,
|
||||
Building2,
|
||||
} from 'lucide-react';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { logout } from '@/lib/api/auth';
|
||||
@@ -29,11 +30,19 @@ const navigation = [
|
||||
{ name: 'Config', href: '/configuracion', icon: Settings },
|
||||
];
|
||||
|
||||
const adminNavigation = [
|
||||
{ name: 'Clientes', href: '/clientes', icon: Building2 },
|
||||
];
|
||||
|
||||
export function SidebarFloating() {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { user, logout: clearAuth } = useAuthStore();
|
||||
|
||||
const allNavigation = user?.role === 'admin'
|
||||
? [...navigation.slice(0, -1), ...adminNavigation, navigation[navigation.length - 1]]
|
||||
: navigation;
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await logout();
|
||||
@@ -61,7 +70,7 @@ export function SidebarFloating() {
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 space-y-1">
|
||||
{navigation.map((item) => {
|
||||
{allNavigation.map((item) => {
|
||||
const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||||
return (
|
||||
<Link
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
Calendar,
|
||||
Bell,
|
||||
Users,
|
||||
Building2,
|
||||
} from 'lucide-react';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { logout } from '@/lib/api/auth';
|
||||
@@ -29,6 +30,10 @@ const navigation = [
|
||||
{ name: 'Configuracion', href: '/configuracion', icon: Settings },
|
||||
];
|
||||
|
||||
const adminNavigation = [
|
||||
{ name: 'Clientes', href: '/clientes', icon: Building2 },
|
||||
];
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
@@ -45,6 +50,10 @@ export function Sidebar() {
|
||||
}
|
||||
};
|
||||
|
||||
const allNavigation = user?.role === 'admin'
|
||||
? [...navigation.slice(0, -1), ...adminNavigation, navigation[navigation.length - 1]]
|
||||
: navigation;
|
||||
|
||||
return (
|
||||
<aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-card">
|
||||
<div className="flex h-full flex-col">
|
||||
@@ -60,7 +69,7 @@ export function Sidebar() {
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 space-y-1 px-3 py-4">
|
||||
{navigation.map((item) => {
|
||||
{allNavigation.map((item) => {
|
||||
const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||||
return (
|
||||
<Link
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
Bell,
|
||||
Users,
|
||||
ChevronDown,
|
||||
Building2,
|
||||
} from 'lucide-react';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { logout } from '@/lib/api/auth';
|
||||
@@ -31,12 +32,20 @@ const navigation = [
|
||||
{ name: 'Config', href: '/configuracion', icon: Settings },
|
||||
];
|
||||
|
||||
const adminNavigation = [
|
||||
{ name: 'Clientes', href: '/clientes', icon: Building2 },
|
||||
];
|
||||
|
||||
export function TopNav() {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { user, logout: clearAuth } = useAuthStore();
|
||||
const [userMenuOpen, setUserMenuOpen] = useState(false);
|
||||
|
||||
const allNavigation = user?.role === 'admin'
|
||||
? [...navigation.slice(0, -1), ...adminNavigation, navigation[navigation.length - 1]]
|
||||
: navigation;
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await logout();
|
||||
@@ -61,7 +70,7 @@ export function TopNav() {
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 flex items-center gap-1">
|
||||
{navigation.map((item) => {
|
||||
{allNavigation.map((item) => {
|
||||
const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||||
return (
|
||||
<Link
|
||||
|
||||
Reference in New Issue
Block a user