Refactor User Management into Unified Command Center with RBAC tabs
This commit is contained in:
CycroftX
@@ -1,143 +1,85 @@
|
||||
import { User, Shield, UserCheck, Search, Plus } from 'lucide-react';
|
||||
import { AppLayout } from '@/components/layout/AppLayout';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const mockUsers = [
|
||||
{ id: '1', name: 'Arjun Sharma', email: 'arjun@eventify.in', role: 'admin', status: 'active', lastActive: new Date() },
|
||||
{ id: '2', name: 'Priya Patel', email: 'priya@eventify.in', role: 'support', status: 'active', lastActive: new Date(Date.now() - 1000 * 60 * 30) },
|
||||
{ id: '3', name: 'Rahul Kumar', email: 'rahul@eventify.in', role: 'viewer', status: 'inactive', lastActive: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3) },
|
||||
];
|
||||
import {
|
||||
Shield,
|
||||
Users,
|
||||
BriefcaseBusiness,
|
||||
Settings2,
|
||||
ListFilter
|
||||
} from "lucide-react";
|
||||
import { AppLayout } from "@/components/layout/AppLayout";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { InternalTeamTab } from "@/features/users/components/InternalTeamTab";
|
||||
import { PartnerAdminTab } from "@/features/users/components/PartnerAdminTab";
|
||||
import { UserBaseTab } from "@/features/users/components/UserBaseTab";
|
||||
import { RoleMatrix } from "@/features/users/components/RoleMatrix";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger
|
||||
} from "@/components/ui/sheet";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function Users() {
|
||||
return (
|
||||
<AppLayout
|
||||
title="Users"
|
||||
description="Manage platform administrators and their access levels."
|
||||
>
|
||||
{/* Quick Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="neu-card p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-12 w-12 rounded-xl bg-accent/10 flex items-center justify-center">
|
||||
<User className="h-6 w-6 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-foreground">8</p>
|
||||
<p className="text-sm text-muted-foreground">Total Users</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="neu-card p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-12 w-12 rounded-xl bg-warning/10 flex items-center justify-center">
|
||||
<Shield className="h-6 w-6 text-warning" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-foreground">3</p>
|
||||
<p className="text-sm text-muted-foreground">Admins</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="neu-card p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-12 w-12 rounded-xl bg-success/10 flex items-center justify-center">
|
||||
<UserCheck className="h-6 w-6 text-success" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-foreground">6</p>
|
||||
<p className="text-sm text-muted-foreground">Active Now</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AppLayout title="Command Center" description="Unified team, partner, and user management.">
|
||||
<div className="space-y-6 container mx-auto p-2 md:p-4">
|
||||
|
||||
{/* Users Table */}
|
||||
<div className="neu-card p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-bold text-foreground">Platform Users</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users..."
|
||||
className="h-10 w-64 pl-10 pr-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none focus:ring-2 focus:ring-accent/50"
|
||||
/>
|
||||
</div>
|
||||
<button className="h-10 px-4 rounded-xl bg-primary text-primary-foreground flex items-center gap-2 shadow-neu-sm hover:shadow-neu transition-shadow">
|
||||
<Plus className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">Add User</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Tabs defaultValue="internal" className="w-full space-y-6">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border/50">
|
||||
<th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">User</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Role</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Status</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Last Active</th>
|
||||
<th className="text-right py-3 px-4 text-sm font-semibold text-muted-foreground">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mockUsers.map((user) => (
|
||||
<tr key={user.id} className="border-b border-border/30 hover:bg-secondary/30 transition-colors">
|
||||
<td className="py-4 px-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-xl bg-primary shadow-neu-inset-sm flex items-center justify-center">
|
||||
<span className="text-sm font-bold text-primary-foreground">
|
||||
{user.name.split(' ').map(n => n[0]).join('')}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{user.name}</p>
|
||||
<p className="text-sm text-muted-foreground">{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className={cn(
|
||||
"inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium capitalize",
|
||||
user.role === 'admin' && "bg-warning/10 text-warning",
|
||||
user.role === 'support' && "bg-accent/10 text-accent",
|
||||
user.role === 'viewer' && "bg-muted text-muted-foreground"
|
||||
)}>
|
||||
{user.role}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className={cn(
|
||||
"inline-flex items-center gap-1.5 text-sm font-medium",
|
||||
user.status === 'active' ? "text-success" : "text-muted-foreground"
|
||||
)}>
|
||||
<span className={cn(
|
||||
"h-2 w-2 rounded-full",
|
||||
user.status === 'active' ? "bg-success animate-pulse-soft" : "bg-muted-foreground"
|
||||
)} />
|
||||
{user.status === 'active' ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-muted-foreground">
|
||||
{user.lastActive.toLocaleDateString('en-IN', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right">
|
||||
<button className="text-sm font-medium text-accent hover:underline">
|
||||
Edit
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* Main Navigation Tabs */}
|
||||
<TabsList className="grid grid-cols-3 w-full md:w-[600px] h-11 bg-secondary/50 border border-border/50">
|
||||
<TabsTrigger value="internal" className="data-[state=active]:bg-background data-[state=active]:shadow-sm">
|
||||
<Shield className="h-4 w-4 mr-2" />
|
||||
Internal Team
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="partners" className="data-[state=active]:bg-background data-[state=active]:shadow-sm">
|
||||
<BriefcaseBusiness className="h-4 w-4 mr-2" />
|
||||
Partners
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="users" className="data-[state=active]:bg-background data-[state=active]:shadow-sm">
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
User Base
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Quick Actions (Role Manager) */}
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" className="gap-2 border-dashed border-primary/40 hover:border-primary text-primary hover:bg-primary/5">
|
||||
<Settings2 className="h-4 w-4" />
|
||||
Manage Roles & Permissions
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right" className="min-w-[400px] md:min-w-[800px] sm:w-[80vw] overflow-y-auto">
|
||||
<SheetHeader className="mb-6">
|
||||
<SheetTitle>Role Permissions Matrix</SheetTitle>
|
||||
<SheetDescription>Verify and modify capabilities for each internal system role.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<RoleMatrix />
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
|
||||
<div className="min-h-[600px] rounded-xl border border-border/40 bg-card/30 p-1">
|
||||
<div className="h-full bg-background/50 rounded-lg p-4 md:p-6 shadow-sm">
|
||||
<TabsContent value="internal" className="m-0 focus-visible:outline-none animate-in fade-in-50 duration-300">
|
||||
<InternalTeamTab />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="partners" className="m-0 focus-visible:outline-none animate-in fade-in-50 duration-300">
|
||||
<PartnerAdminTab />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="users" className="m-0 focus-visible:outline-none animate-in fade-in-50 duration-300">
|
||||
<UserBaseTab />
|
||||
</TabsContent>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user