596 lines
25 KiB
JavaScript
596 lines
25 KiB
JavaScript
import React, { useState, useMemo } from "react";
|
|
import { base44 } from "@/api/base44Client";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|
import {
|
|
Users, UserPlus, Mail, Shield, Building2, Edit, Trash2, Search,
|
|
Filter, MoreVertical, Eye, Key, UserCheck, UserX, Layers,
|
|
Phone, Calendar, Clock, CheckCircle2, XCircle, AlertCircle
|
|
} from "lucide-react";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import UserPermissionsModal from "@/components/permissions/UserPermissionsModal";
|
|
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
|
|
// Layer configuration
|
|
const LAYERS = [
|
|
{ id: "all", name: "All Users", icon: Users, color: "bg-slate-600" },
|
|
{ id: "admin", name: "Admins", icon: Shield, color: "bg-red-600" },
|
|
{ id: "procurement", name: "Procurement", icon: Building2, color: "bg-blue-600" },
|
|
{ id: "operator", name: "Operators", icon: Building2, color: "bg-emerald-600" },
|
|
{ id: "sector", name: "Sectors", icon: Layers, color: "bg-purple-600" },
|
|
{ id: "client", name: "Clients", icon: Users, color: "bg-green-600" },
|
|
{ id: "vendor", name: "Vendors", icon: Building2, color: "bg-amber-600" },
|
|
{ id: "workforce", name: "Workforce", icon: Users, color: "bg-slate-500" },
|
|
];
|
|
|
|
const ROLE_CONFIG = {
|
|
admin: { name: "Administrator", color: "bg-red-100 text-red-700 border-red-200", bgGradient: "from-red-500 to-red-700" },
|
|
procurement: { name: "Procurement", color: "bg-blue-100 text-blue-700 border-blue-200", bgGradient: "from-blue-500 to-blue-700" },
|
|
operator: { name: "Operator", color: "bg-emerald-100 text-emerald-700 border-emerald-200", bgGradient: "from-emerald-500 to-emerald-700" },
|
|
sector: { name: "Sector Manager", color: "bg-purple-100 text-purple-700 border-purple-200", bgGradient: "from-purple-500 to-purple-700" },
|
|
client: { name: "Client", color: "bg-green-100 text-green-700 border-green-200", bgGradient: "from-green-500 to-green-700" },
|
|
vendor: { name: "Vendor", color: "bg-amber-100 text-amber-700 border-amber-200", bgGradient: "from-amber-500 to-amber-700" },
|
|
workforce: { name: "Workforce", color: "bg-slate-100 text-slate-700 border-slate-200", bgGradient: "from-slate-500 to-slate-700" },
|
|
};
|
|
|
|
export default function UserManagement() {
|
|
const [showInviteDialog, setShowInviteDialog] = useState(false);
|
|
const [activeLayer, setActiveLayer] = useState("all");
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [inviteData, setInviteData] = useState({
|
|
email: "",
|
|
full_name: "",
|
|
user_role: "workforce",
|
|
company_name: "",
|
|
phone: "",
|
|
department: ""
|
|
});
|
|
|
|
const [selectedUser, setSelectedUser] = useState(null);
|
|
const [showPermissionsModal, setShowPermissionsModal] = useState(false);
|
|
const [showUserDetailModal, setShowUserDetailModal] = useState(false);
|
|
|
|
const queryClient = useQueryClient();
|
|
const { toast } = useToast();
|
|
|
|
const { data: users = [] } = useQuery({
|
|
queryKey: ['all-users'],
|
|
queryFn: async () => {
|
|
const allUsers = await base44.entities.User.list('-created_date');
|
|
return allUsers;
|
|
},
|
|
initialData: [],
|
|
});
|
|
|
|
const { data: currentUser } = useQuery({
|
|
queryKey: ['current-user'],
|
|
queryFn: () => base44.auth.me(),
|
|
});
|
|
|
|
const updateUserMutation = useMutation({
|
|
mutationFn: ({ userId, data }) => base44.entities.User.update(userId, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['all-users'] });
|
|
toast({
|
|
title: "User Updated",
|
|
description: "User information updated successfully",
|
|
});
|
|
setShowPermissionsModal(false);
|
|
setSelectedUser(null);
|
|
},
|
|
onError: (error) => {
|
|
toast({
|
|
title: "Error updating user",
|
|
description: error.message || "Failed to update user information.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
});
|
|
|
|
// Calculate stats per layer
|
|
const layerStats = useMemo(() => {
|
|
const stats = {};
|
|
LAYERS.forEach(layer => {
|
|
if (layer.id === "all") {
|
|
stats[layer.id] = users.length;
|
|
} else {
|
|
stats[layer.id] = users.filter(u => (u.user_role || u.role) === layer.id).length;
|
|
}
|
|
});
|
|
return stats;
|
|
}, [users]);
|
|
|
|
// Filter users
|
|
const filteredUsers = useMemo(() => {
|
|
let filtered = users;
|
|
|
|
if (activeLayer !== "all") {
|
|
filtered = filtered.filter(u => (u.user_role || u.role) === activeLayer);
|
|
}
|
|
|
|
if (searchTerm) {
|
|
const term = searchTerm.toLowerCase();
|
|
filtered = filtered.filter(u =>
|
|
u.full_name?.toLowerCase().includes(term) ||
|
|
u.email?.toLowerCase().includes(term) ||
|
|
u.company_name?.toLowerCase().includes(term)
|
|
);
|
|
}
|
|
|
|
return filtered;
|
|
}, [users, activeLayer, searchTerm]);
|
|
|
|
const handleInviteUser = async () => {
|
|
if (!inviteData.email || !inviteData.full_name) {
|
|
toast({
|
|
title: "Missing Information",
|
|
description: "Please fill in email and full name",
|
|
variant: "destructive"
|
|
});
|
|
return;
|
|
}
|
|
|
|
toast({
|
|
title: "User Invited",
|
|
description: `Invitation sent to ${inviteData.email}. They will receive setup instructions via email.`,
|
|
});
|
|
|
|
setShowInviteDialog(false);
|
|
setInviteData({
|
|
email: "",
|
|
full_name: "",
|
|
user_role: "workforce",
|
|
company_name: "",
|
|
phone: "",
|
|
department: ""
|
|
});
|
|
};
|
|
|
|
const handleEditPermissions = (user) => {
|
|
setSelectedUser(user);
|
|
setShowPermissionsModal(true);
|
|
};
|
|
|
|
const handleViewUser = (user) => {
|
|
setSelectedUser(user);
|
|
setShowUserDetailModal(true);
|
|
};
|
|
|
|
const handleSavePermissions = async (updatedUser) => {
|
|
await updateUserMutation.mutateAsync({ userId: updatedUser.id, data: updatedUser });
|
|
};
|
|
|
|
const getRoleConfig = (role) => ROLE_CONFIG[role] || ROLE_CONFIG.workforce;
|
|
|
|
if (currentUser?.user_role !== "admin" && currentUser?.role !== "admin") {
|
|
return (
|
|
<div className="p-8 text-center">
|
|
<Shield className="w-16 h-16 mx-auto text-red-500 mb-4" />
|
|
<h2 className="text-2xl font-bold text-slate-900 mb-2">Access Denied</h2>
|
|
<p className="text-slate-600">Only administrators can access user management.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const sampleAvatar = "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop";
|
|
|
|
return (
|
|
<div className="p-4 md:p-8 bg-slate-50 min-h-screen">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-900">User Management</h1>
|
|
<p className="text-slate-500 mt-1">Manage users across all ecosystem layers</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => setShowInviteDialog(true)}
|
|
className="bg-gradient-to-r from-[#0A39DF] to-[#1C323E] shadow-lg"
|
|
>
|
|
<UserPlus className="w-4 h-4 mr-2" />
|
|
Invite User
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Layer Stats Cards */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3 mb-6">
|
|
{LAYERS.map((layer) => {
|
|
const Icon = layer.icon;
|
|
const isActive = activeLayer === layer.id;
|
|
|
|
return (
|
|
<button
|
|
key={layer.id}
|
|
onClick={() => setActiveLayer(layer.id)}
|
|
className={`p-4 rounded-xl border-2 transition-all text-center ${
|
|
isActive
|
|
? 'border-[#0A39DF] bg-blue-50 shadow-md scale-105'
|
|
: 'border-slate-200 bg-white hover:border-slate-300 hover:shadow-sm'
|
|
}`}
|
|
>
|
|
<div className={`w-10 h-10 mx-auto rounded-lg ${layer.color} flex items-center justify-center mb-2`}>
|
|
<Icon className="w-5 h-5 text-white" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-slate-900">{layerStats[layer.id]}</p>
|
|
<p className="text-xs text-slate-500 truncate">{layer.name}</p>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Search and Filter */}
|
|
<Card className="mb-6 border-slate-200 shadow-sm">
|
|
<CardContent className="p-4">
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
|
|
<Input
|
|
placeholder="Search by name, email, or company..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 border-slate-300"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Select value={activeLayer} onValueChange={setActiveLayer}>
|
|
<SelectTrigger className="w-[180px]">
|
|
<Filter className="w-4 h-4 mr-2" />
|
|
<SelectValue placeholder="Filter by layer" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{LAYERS.map((layer) => (
|
|
<SelectItem key={layer.id} value={layer.id}>
|
|
{layer.name} ({layerStats[layer.id]})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Users Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{filteredUsers.map((user) => {
|
|
const role = user.user_role || user.role || "workforce";
|
|
const config = getRoleConfig(role);
|
|
|
|
return (
|
|
<Card
|
|
key={user.id}
|
|
className="border-slate-200 hover:border-[#0A39DF] hover:shadow-lg transition-all overflow-hidden group"
|
|
>
|
|
{/* Role Header */}
|
|
<div className={`h-2 bg-gradient-to-r ${config.bgGradient}`}></div>
|
|
|
|
<CardContent className="p-5">
|
|
<div className="flex items-start gap-4">
|
|
<Avatar className="w-14 h-14 border-2 border-slate-200 shadow-sm">
|
|
<AvatarImage src={user.profile_picture || sampleAvatar} alt={user.full_name} />
|
|
<AvatarFallback className={`bg-gradient-to-br ${config.bgGradient} text-white font-bold text-lg`}>
|
|
{user.full_name?.charAt(0) || user.email?.charAt(0) || '?'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div>
|
|
<h4 className="font-bold text-slate-900 truncate">{user.full_name || 'Unnamed User'}</h4>
|
|
<Badge className={`${config.color} border text-xs mt-1`}>
|
|
{config.name}
|
|
</Badge>
|
|
</div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<MoreVertical className="w-4 h-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => handleViewUser(user)}>
|
|
<Eye className="w-4 h-4 mr-2" />
|
|
View Details
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => handleEditPermissions(user)}>
|
|
<Key className="w-4 h-4 mr-2" />
|
|
Edit Permissions
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className="text-red-600">
|
|
<UserX className="w-4 h-4 mr-2" />
|
|
Deactivate User
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<div className="mt-3 space-y-1.5">
|
|
<p className="text-sm text-slate-600 flex items-center gap-2 truncate">
|
|
<Mail className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
|
|
{user.email}
|
|
</p>
|
|
{user.company_name && (
|
|
<p className="text-sm text-slate-600 flex items-center gap-2 truncate">
|
|
<Building2 className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
|
|
{user.company_name}
|
|
</p>
|
|
)}
|
|
{user.phone && (
|
|
<p className="text-sm text-slate-600 flex items-center gap-2 truncate">
|
|
<Phone className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
|
|
{user.phone}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="flex items-center gap-2 mt-4 pt-4 border-t border-slate-100">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1 text-xs"
|
|
onClick={() => handleViewUser(user)}
|
|
>
|
|
<Eye className="w-3.5 h-3.5 mr-1" />
|
|
View
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1 text-xs hover:bg-blue-50 hover:text-blue-700 hover:border-blue-300"
|
|
onClick={() => handleEditPermissions(user)}
|
|
>
|
|
<Shield className="w-3.5 h-3.5 mr-1" />
|
|
Permissions
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1 text-xs"
|
|
>
|
|
<Edit className="w-3.5 h-3.5 mr-1" />
|
|
Edit
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{filteredUsers.length === 0 && (
|
|
<div className="text-center py-16 bg-white rounded-xl border border-slate-200">
|
|
<Users className="w-16 h-16 mx-auto text-slate-300 mb-4" />
|
|
<h3 className="text-xl font-semibold text-slate-900 mb-2">No users found</h3>
|
|
<p className="text-slate-600">
|
|
{searchTerm ? "Try adjusting your search" : "No users in this layer yet"}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Invite User Dialog */}
|
|
<Dialog open={showInviteDialog} onOpenChange={setShowInviteDialog}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<UserPlus className="w-5 h-5 text-[#0A39DF]" />
|
|
Invite New User
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-6 py-4">
|
|
{/* Role Selection */}
|
|
<div>
|
|
<Label className="text-sm font-semibold mb-3 block">Select User Role</Label>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
{Object.entries(ROLE_CONFIG).map(([roleId, config]) => (
|
|
<button
|
|
key={roleId}
|
|
onClick={() => setInviteData({ ...inviteData, user_role: roleId })}
|
|
className={`p-3 rounded-xl border-2 transition-all text-center ${
|
|
inviteData.user_role === roleId
|
|
? 'border-[#0A39DF] bg-blue-50 shadow-md'
|
|
: 'border-slate-200 bg-white hover:border-slate-300'
|
|
}`}
|
|
>
|
|
<div className={`w-8 h-8 mx-auto rounded-lg bg-gradient-to-br ${config.bgGradient} flex items-center justify-center mb-2`}>
|
|
<Users className="w-4 h-4 text-white" />
|
|
</div>
|
|
<p className="text-xs font-semibold text-slate-900">{config.name}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* User Details */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Full Name *</Label>
|
|
<Input
|
|
value={inviteData.full_name}
|
|
onChange={(e) => setInviteData({ ...inviteData, full_name: e.target.value })}
|
|
placeholder="John Doe"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Email *</Label>
|
|
<Input
|
|
type="email"
|
|
value={inviteData.email}
|
|
onChange={(e) => setInviteData({ ...inviteData, email: e.target.value })}
|
|
placeholder="john@example.com"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Phone</Label>
|
|
<Input
|
|
value={inviteData.phone}
|
|
onChange={(e) => setInviteData({ ...inviteData, phone: e.target.value })}
|
|
placeholder="(555) 123-4567"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Company Name</Label>
|
|
<Input
|
|
value={inviteData.company_name}
|
|
onChange={(e) => setInviteData({ ...inviteData, company_name: e.target.value })}
|
|
placeholder="Acme Corp"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Department</Label>
|
|
<Input
|
|
value={inviteData.department}
|
|
onChange={(e) => setInviteData({ ...inviteData, department: e.target.value })}
|
|
placeholder="Operations"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="p-4 bg-blue-50 rounded-xl border border-blue-200">
|
|
<div className="flex items-start gap-3">
|
|
<Mail className="w-5 h-5 text-blue-600 mt-0.5" />
|
|
<div>
|
|
<p className="text-sm font-medium text-blue-900">Invitation will be sent</p>
|
|
<p className="text-xs text-blue-700 mt-1">
|
|
The user will receive an email with instructions to set up their account and access the platform as a <strong>{ROLE_CONFIG[inviteData.user_role].name}</strong>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setShowInviteDialog(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleInviteUser} className="bg-gradient-to-r from-[#0A39DF] to-[#1C323E]">
|
|
<Mail className="w-4 h-4 mr-2" />
|
|
Send Invitation
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* User Detail Modal */}
|
|
<Dialog open={showUserDetailModal} onOpenChange={setShowUserDetailModal}>
|
|
<DialogContent className="max-w-lg">
|
|
{selectedUser && (
|
|
<>
|
|
<DialogHeader>
|
|
<DialogTitle>User Details</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="py-4">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<Avatar className="w-20 h-20 border-2 border-slate-200">
|
|
<AvatarImage src={selectedUser.profile_picture || sampleAvatar} alt={selectedUser.full_name} />
|
|
<AvatarFallback className={`bg-gradient-to-br ${getRoleConfig(selectedUser.user_role || selectedUser.role).bgGradient} text-white font-bold text-2xl`}>
|
|
{selectedUser.full_name?.charAt(0) || '?'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-slate-900">{selectedUser.full_name}</h3>
|
|
<Badge className={`${getRoleConfig(selectedUser.user_role || selectedUser.role).color} border mt-1`}>
|
|
{getRoleConfig(selectedUser.user_role || selectedUser.role).name}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
|
|
<Mail className="w-5 h-5 text-slate-400" />
|
|
<div>
|
|
<p className="text-xs text-slate-500">Email</p>
|
|
<p className="text-sm font-medium text-slate-900">{selectedUser.email}</p>
|
|
</div>
|
|
</div>
|
|
{selectedUser.phone && (
|
|
<div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
|
|
<Phone className="w-5 h-5 text-slate-400" />
|
|
<div>
|
|
<p className="text-xs text-slate-500">Phone</p>
|
|
<p className="text-sm font-medium text-slate-900">{selectedUser.phone}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectedUser.company_name && (
|
|
<div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
|
|
<Building2 className="w-5 h-5 text-slate-400" />
|
|
<div>
|
|
<p className="text-xs text-slate-500">Company</p>
|
|
<p className="text-sm font-medium text-slate-900">{selectedUser.company_name}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
|
|
<Calendar className="w-5 h-5 text-slate-400" />
|
|
<div>
|
|
<p className="text-xs text-slate-500">Joined</p>
|
|
<p className="text-sm font-medium text-slate-900">
|
|
{selectedUser.created_date ? new Date(selectedUser.created_date).toLocaleDateString() : 'Unknown'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setShowUserDetailModal(false)}>
|
|
Close
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
setShowUserDetailModal(false);
|
|
handleEditPermissions(selectedUser);
|
|
}}
|
|
className="bg-[#0A39DF]"
|
|
>
|
|
<Shield className="w-4 h-4 mr-2" />
|
|
Edit Permissions
|
|
</Button>
|
|
</DialogFooter>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Permissions Modal */}
|
|
<UserPermissionsModal
|
|
user={selectedUser}
|
|
open={showPermissionsModal}
|
|
onClose={() => {
|
|
setShowPermissionsModal(false);
|
|
setSelectedUser(null);
|
|
}}
|
|
onSave={handleSavePermissions}
|
|
isSaving={updateUserMutation.isPending}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |