93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||
import { type User, type UserRole, ROLE_NAMES, ROLE_HIERARCHY } from "@/types/user"
|
||
|
||
interface RoleManagementModalProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
user: User | null
|
||
adminRole: UserRole
|
||
onRoleChange: (userId: string, newRole: UserRole) => void
|
||
}
|
||
|
||
export function RoleManagementModal({ isOpen, onClose, user, adminRole, onRoleChange }: RoleManagementModalProps) {
|
||
const [selectedRole, setSelectedRole] = useState("")
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
if (!user) return null
|
||
|
||
const adminLevel = ROLE_HIERARCHY[adminRole] || 0
|
||
const availableRoles = (Object.entries(ROLE_NAMES) as [UserRole, string][]).filter(([role]) => {
|
||
const roleLevel = ROLE_HIERARCHY[role] || 0
|
||
return roleLevel < adminLevel
|
||
})
|
||
|
||
const handleRoleChange = async () => {
|
||
if (!selectedRole) return
|
||
|
||
setLoading(true)
|
||
try {
|
||
await onRoleChange(user.national_id, selectedRole as UserRole)
|
||
onClose()
|
||
} catch (error) {
|
||
console.error("Error changing role:", error)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||
<DialogContent className="max-w-md" dir="rtl">
|
||
<DialogHeader>
|
||
<DialogTitle>שינוי תפקיד - {user.name}</DialogTitle>
|
||
<DialogDescription>בחר תפקיד חדש עבור המשתמש</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-4">
|
||
<div className="bg-gray-50 p-3 rounded">
|
||
<p className="text-sm text-gray-600">תפקיד נוכחי:</p>
|
||
<p className="font-semibold">{ROLE_NAMES[user.role] || user.role}</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium">תפקיד חדש:</label>
|
||
<Select value={selectedRole} onValueChange={setSelectedRole}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="בחר תפקיד" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{availableRoles.map(([role, name]) => (
|
||
<SelectItem key={role} value={role}>
|
||
{name}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{selectedRole && (
|
||
<Alert>
|
||
<AlertDescription>המשתמש יקבל הרשאות של {ROLE_NAMES[selectedRole as UserRole]}</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
<div className="flex gap-2 justify-end">
|
||
<Button variant="outline" onClick={onClose}>
|
||
ביטול
|
||
</Button>
|
||
<Button onClick={handleRoleChange} disabled={!selectedRole || loading}>
|
||
{loading ? "משנה..." : "שנה תפקיד"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|