vivekpprakash/eventify_command_center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor User Management into Unified Command Center with RBAC tabs

Browse Source
This commit is contained in:
CycroftX
2026-02-03 21:11:07 +05:30
parent 10e8e28c52
commit eb415dac94
6 changed files with 616 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/features/users/components/InternalTeamTab.tsx Normal file
View File

@@ -0,0 +1,107 @@
import { useState } from "react";
import { Plus, MoreHorizontal, ShieldAlert, Key } from "lucide-react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { mockInternalUsers } from "@/features/users/data/mockRbacData";
import { toast } from "sonner";
export function InternalTeamTab() {
const handleRevokeAccess = (name: string) => {
toast.success(`Access revoked for ${name}`);
};
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h3 className="text-lg font-bold">Internal Staff</h3>
<Badge variant="secondary" className="text-xs">{mockInternalUsers.length} Active</Badge>
</div>
<Button className="gap-2 bg-primary text-primary-foreground shadow-neu-sm hover:shadow-neu transition-all">
<Plus className="h-4 w-4" /> Add Staff Member
</Button>
</div>
<div className="rounded-xl border border-border overflow-hidden bg-card">
<Table>
<TableHeader>
<TableRow className="bg-secondary/30 hover:bg-secondary/30">
<TableHead>User</TableHead>
<TableHead>Role</TableHead>
<TableHead>Status</TableHead>
<TableHead>Last Active</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mockInternalUsers.map((user) => (
<TableRow key={user.id} className="hover:bg-secondary/10">
<TableCell>
<div>
<p className="font-medium text-foreground">{user.name}</p>
<p className="text-xs text-muted-foreground">{user.email}</p>
</div>
</TableCell>
<TableCell>
<Badge variant="outline" className="capitalize bg-secondary/50">
{user.role.replace('_', ' ')}
</Badge>
</TableCell>
<TableCell>
{user.status === 'Active' ? (
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-success/10 text-success">
Active
</span>
) : (
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-muted text-muted-foreground">
Inactive
</span>
)}
</TableCell>
<TableCell className="text-xs text-muted-foreground">{user.lastActive}</TableCell>
<TableCell className="text-right">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-foreground">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Manage Access</DropdownMenuLabel>
<DropdownMenuItem>Edit Role</DropdownMenuItem>
<DropdownMenuItem>View Audit Log</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-warning">
<Key className="mr-2 h-4 w-4" /> Reset Password
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleRevokeAccess(user.name)} className="text-error">
<ShieldAlert className="mr-2 h-4 w-4" /> Revoke Access
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
}

116
src/features/users/components/PartnerAdminTab.tsx Normal file
View File

@@ -0,0 +1,116 @@
import { Search, MoreHorizontal, ShieldCheck, BadgePercent, Lock } from "lucide-react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { mockPartnerUsers } from "@/features/users/data/mockRbacData";
import { toast } from "sonner";
export function PartnerAdminTab() {
const handleToggleVerification = (name: string, currentStatus: boolean) => {
toast.success(`${name} verification status updated to ${!currentStatus}`);
};
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h3 className="text-lg font-bold text-foreground">Partner Administration</h3>
<Badge variant="outline" className="text-xs border-blue-200 text-blue-600 bg-blue-50">B2B</Badge>
</div>
<div className="relative w-64">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input placeholder="Search partners..." className="pl-9 h-9 bg-secondary/50 border-transparent focus:border-primary" />
</div>
</div>
<div className="rounded-xl border border-border overflow-hidden bg-card">
<Table>
<TableHeader>
<TableRow className="bg-secondary/30 hover:bg-secondary/30">
<TableHead>Partner User</TableHead>
<TableHead>Organization</TableHead>
<TableHead>Role</TableHead>
<TableHead>Verification</TableHead>
<TableHead>Commission</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mockPartnerUsers.map((user) => (
<TableRow key={user.id} className="hover:bg-secondary/10">
<TableCell>
<div>
<p className="font-medium text-foreground">{user.name}</p>
<p className="text-xs text-muted-foreground">{user.email}</p>
</div>
</TableCell>
<TableCell>
<span className="font-medium">{user.partnerName}</span>
</TableCell>
<TableCell>
<Badge variant="secondary" className="font-normal">{user.role}</Badge>
</TableCell>
<TableCell>
{user.isVerified ? (
<Badge className="bg-blue-500/10 text-blue-600 border-none hover:bg-blue-500/20 gap-1">
<ShieldCheck className="h-3 w-3" /> Verified
</Badge>
) : (
<Badge variant="outline" className="text-muted-foreground gap-1">
Unverified
</Badge>
)}
</TableCell>
<TableCell>
{user.commissionOverride ? (
<span className="text-xs font-bold text-orange-600 bg-orange-100 px-2 py-1 rounded-full">
{user.commissionOverride}% (VIP)
</span>
) : (
<span className="text-xs text-muted-foreground">Standard</span>
)}
</TableCell>
<TableCell className="text-right">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-foreground">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleToggleVerification(user.partnerName, user.isVerified)}>
<ShieldCheck className="mr-2 h-4 w-4" /> Toggle Verification
</DropdownMenuItem>
<DropdownMenuItem>
<BadgePercent className="mr-2 h-4 w-4" /> Set Custom Commission
</DropdownMenuItem>
<DropdownMenuItem className="text-error">
<Lock className="mr-2 h-4 w-4" /> Suspend Account
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
}

97
src/features/users/components/RoleMatrix.tsx Normal file
View File

@@ -0,0 +1,97 @@
import { useState } from "react";
import { Check, Shield } from "lucide-react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Role, Permission, roles as initialRoles, permissions } from "@/features/users/data/mockRbacData";
import { toast } from "sonner";
export function RoleMatrix() {
const [roles, setRoles] = useState<Role[]>(initialRoles);
const togglePermission = (roleId: string, permissionId: string) => {
setRoles(currentRoles =>
currentRoles.map(role => {
if (role.id !== roleId) return role;
const hasPermission = role.permissions.includes(permissionId);
return {
...role,
permissions: hasPermission
? role.permissions.filter(p => p !== permissionId)
: [...role.permissions, permissionId]
};
})
);
};
const handleSave = () => {
toast.success("Role permissions updated successfully");
};
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-bold flex items-center gap-2">
<Shield className="h-5 w-5 text-primary" />
Role Definitions
</h3>
<p className="text-sm text-muted-foreground">Configure detailed permissions for each internal role.</p>
</div>
<Button onClick={handleSave} className="bg-primary text-primary-foreground shadow-neu-sm hover:shadow-neu">
Save Changes
</Button>
</div>
<div className="rounded-xl border border-border overflow-hidden bg-card">
<Table>
<TableHeader>
<TableRow className="bg-secondary/50 hover:bg-secondary/50">
<TableHead className="w-[300px] font-bold">Permission / Capability</TableHead>
{roles.map(role => (
<TableHead key={role.id} className="text-center min-w-[120px]">
<Badge variant="outline" className={role.color}>
{role.name}
</Badge>
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{permissions.map(permission => (
<TableRow key={permission.id} className="hover:bg-secondary/20">
<TableCell className="font-medium">
<div className="flex flex-col">
<span className="text-sm text-foreground">{permission.name}</span>
<span className="text-xs text-muted-foreground">{permission.description}</span>
</div>
</TableCell>
{roles.map(role => (
<TableCell key={`${role.id}-${permission.id}`} className="text-center">
<div className="flex justify-center">
<Checkbox
checked={role.permissions.includes(permission.id)}
onCheckedChange={() => togglePermission(role.id, permission.id)}
className="data-[state=checked]:bg-primary data-[state=checked]:border-primary"
/>
</div>
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
}

120
src/features/users/components/UserBaseTab.tsx Normal file
View File

@@ -0,0 +1,120 @@
import { Search, MoreHorizontal, UserX, KeyRound, Eye } from "lucide-react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { mockEndUsers } from "@/features/users/data/mockRbacData";
import { toast } from "sonner";
import { formatCurrency } from "@/data/mockData";
export function UserBaseTab() {
const handleBanUser = (name: string) => {
toast.success(`User ${name} has been banned.`);
};
const handleImpersonate = (name: string) => {
toast.info(`Impersonating ${name}... (Dev Mode Only)`);
// In a real app this would store a token and redirect
};
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h3 className="text-lg font-bold text-foreground">User Base</h3>
<Badge variant="outline" className="text-xs border-green-200 text-green-700 bg-green-50">B2C</Badge>
</div>
<div className="flex gap-2">
<div className="relative w-72">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input placeholder="Search emails, phone, IDs..." className="pl-9 h-9 bg-secondary/50 border-transparent focus:border-primary" />
</div>
<Button variant="outline" size="sm" className="h-9">Export List</Button>
</div>
</div>
<div className="rounded-xl border border-border overflow-hidden bg-card">
<Table>
<TableHeader>
<TableRow className="bg-secondary/30 hover:bg-secondary/30">
<TableHead>User Details</TableHead>
<TableHead>Contact</TableHead>
<TableHead className="text-center">Bookings</TableHead>
<TableHead className="text-right">Total Spent</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mockEndUsers.map((user) => (
<TableRow key={user.id} className="hover:bg-secondary/10">
<TableCell>
<div>
<p className="font-medium text-foreground">{user.name}</p>
<p className="text-xs text-muted-foreground font-mono">ID: {user.id}</p>
</div>
</TableCell>
<TableCell>
<div className="text-sm">
<p>{user.email}</p>
<p className="text-muted-foreground">{user.phone}</p>
</div>
</TableCell>
<TableCell className="text-center">
<Badge variant="secondary">{user.bookingsCount}</Badge>
</TableCell>
<TableCell className="text-right font-medium">
{formatCurrency(user.totalSpent)}
</TableCell>
<TableCell>
{user.status === 'Active' ? (
<Badge variant="outline" className="border-success/30 text-success bg-success/5">Active</Badge>
) : (
<Badge variant="destructive">Banned</Badge>
)}
</TableCell>
<TableCell className="text-right">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-foreground">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleImpersonate(user.name)}>
<Eye className="mr-2 h-4 w-4" /> Impersonate
</DropdownMenuItem>
<DropdownMenuItem>
<KeyRound className="mr-2 h-4 w-4" /> Reset 2FA
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => handleBanUser(user.name)} className="text-error">
<UserX className="mr-2 h-4 w-4" /> Ban User
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
}

100
src/features/users/data/mockRbacData.ts Normal file
View File

@@ -0,0 +1,100 @@
export interface Permission {
id: string;
name: string;
description: string;
}
export interface Role {
id: string;
name: string;
permissions: string[]; // List of permission IDs
color: string;
}
export const permissions: Permission[] = [
{ id: 'view_dashboard', name: 'View Dashboard', description: 'Access to the main dashboard stats' },
{ id: 'manage_users', name: 'Manage Users', description: 'Create, edit, and delete user accounts' },
{ id: 'manage_partners', name: 'Manage Partners', description: 'Onboard and verify partners' },
{ id: 'manage_events', name: 'Manage Events', description: 'Approve, feature, and edit events' },
{ id: 'view_financials', name: 'View Financials', description: 'Access revenue and transaction data' },
{ id: 'manage_payouts', name: 'Manage Payouts', description: 'Process partner settlements' },
{ id: 'manage_settings', name: 'Manage Settings', description: 'Configure platform settings' },
{ id: 'manage_roles', name: 'Manage Roles', description: 'Edit role permissions' },
];
export const roles: Role[] = [
{
id: 'super_admin',
name: 'Super Admin',
permissions: permissions.map(p => p.id),
color: 'bg-purple-500/10 text-purple-600 border-purple-200'
},
{
id: 'support_agent',
name: 'Support Agent',
permissions: ['view_dashboard', 'manage_users', 'manage_events'],
color: 'bg-blue-500/10 text-blue-600 border-blue-200'
},
{
id: 'content_moderator',
name: 'Content Moderator',
permissions: ['view_dashboard', 'manage_events'],
color: 'bg-orange-500/10 text-orange-600 border-orange-200'
},
{
id: 'finance_manager',
name: 'Finance Manager',
permissions: ['view_dashboard', 'view_financials', 'manage_payouts'],
color: 'bg-green-500/10 text-green-600 border-green-200'
},
];
export interface InternalUser {
id: string;
name: string;
email: string;
role: string;
lastActive: string;
status: 'Active' | 'Inactive';
}
export const mockInternalUsers: InternalUser[] = [
{ id: '1', name: 'Alex Admin', email: 'alex@eventify.com', role: 'super_admin', lastActive: 'Just now', status: 'Active' },
{ id: '2', name: 'Sarah Support', email: 'sarah@eventify.com', role: 'support_agent', lastActive: '2h ago', status: 'Active' },
{ id: '3', name: 'Mike Mod', email: 'mike@eventify.com', role: 'content_moderator', lastActive: '1d ago', status: 'Inactive' },
];
export interface PartnerUser {
id: string;
name: string;
email: string;
partnerName: string; // The organization they belong to
role: 'Partner Admin' | 'Staff';
isVerified: boolean;
commissionOverride?: number; // Optional override
status: 'Active' | 'Suspended';
}
export const mockPartnerUsers: PartnerUser[] = [
{ id: 'p1', name: 'John Venue', email: 'john@neonarena.com', partnerName: 'Neon Arena', role: 'Partner Admin', isVerified: true, status: 'Active' },
{ id: 'p2', name: 'Jane Staff', email: 'jane@neonarena.com', partnerName: 'Neon Arena', role: 'Staff', isVerified: true, status: 'Active' },
{ id: 'p3', name: 'Bob Promoter', email: 'bob@toptier.com', partnerName: 'TopTier Promoters', role: 'Partner Admin', isVerified: false, commissionOverride: 5.0, status: 'Active' },
];
export interface EndUser {
id: string;
name: string;
email: string;
phone: string;
bookingsCount: number;
totalSpent: number;
lastLogin: string;
status: 'Active' | 'Banned';
}
export const mockEndUsers: EndUser[] = [
{ id: 'u1', name: 'Alice Walker', email: 'alice@gmail.com', phone: '+91 9876543210', bookingsCount: 5, totalSpent: 12500, lastLogin: '1h ago', status: 'Active' },
{ id: 'u2', name: 'Charlie Brown', email: 'charlie@yahoo.com', phone: '+91 8765432109', bookingsCount: 1, totalSpent: 500, lastLogin: '3d ago', status: 'Active' },
{ id: 'u3', name: 'Dave Fraud', email: 'dave@suspicious.com', phone: '+91 7654321098', bookingsCount: 0, totalSpent: 0, lastLogin: 'Never', status: 'Banned' },
];