Refactor User Management into Unified Command Center with RBAC tabs
This commit is contained in:
CycroftX
107
src/features/users/components/InternalTeamTab.tsx
Normal file
107
src/features/users/components/InternalTeamTab.tsx
Normal 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
116
src/features/users/components/PartnerAdminTab.tsx
Normal 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
97
src/features/users/components/RoleMatrix.tsx
Normal 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
120
src/features/users/components/UserBaseTab.tsx
Normal 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
100
src/features/users/data/mockRbacData.ts
Normal 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' },
|
||||
];
|
||||
@@ -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>
|
||||
<AppLayout title="Command Center" description="Unified team, partner, and user management.">
|
||||
<div className="space-y-6 container mx-auto p-2 md:p-4">
|
||||
|
||||
<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">
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</Tabs>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user