110 lines
3.6 KiB
TypeScript
110 lines
3.6 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||
|
||
interface User {
|
||
national_id: string
|
||
name: string
|
||
department?: string
|
||
team?: string
|
||
}
|
||
|
||
interface FieldUserCategoryModalProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
category: string
|
||
categoryName: string
|
||
adminId: string
|
||
fieldName: string
|
||
}
|
||
|
||
export function FieldUserCategoryModal({
|
||
isOpen,
|
||
onClose,
|
||
category,
|
||
categoryName,
|
||
adminId,
|
||
fieldName,
|
||
}: FieldUserCategoryModalProps) {
|
||
const [users, setUsers] = useState<User[]>([])
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
useEffect(() => {
|
||
if (isOpen && category && adminId) {
|
||
fetchUsers()
|
||
}
|
||
}, [isOpen, category, adminId])
|
||
|
||
const fetchUsers = async () => {
|
||
setLoading(true)
|
||
try {
|
||
const response = await fetch("/api/admin/field-users-by-category", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ adminId, category }),
|
||
})
|
||
const data = await response.json()
|
||
setUsers(data)
|
||
} catch (err) {
|
||
console.error("Error fetching field users:", err)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||
<DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto" dir="rtl">
|
||
<DialogHeader className="text-center" dir="rtl">
|
||
<DialogTitle className="text-xl text-center" dir="rtl">
|
||
{categoryName} - תחום {fieldName}
|
||
</DialogTitle>
|
||
<DialogDescription className="text-center" dir="rtl">רשימת המשתמשים בקטגוריה זו מהתחום שלך</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
{loading ? (
|
||
<div className="text-center py-8">טוען משתמשים...</div>
|
||
) : (
|
||
<div className="mt-4">
|
||
{users.length > 0 ? (
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow className="text-center" dir="rtl">
|
||
<TableHead className="text-center">שם</TableHead>
|
||
<TableHead className="text-center">מסגרת</TableHead>
|
||
<TableHead className="text-center">צוות</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody className="text-center" dir="rtl">
|
||
{users.map((user) => (
|
||
<TableRow key={user.national_id}>
|
||
<TableCell className="font-medium">{user.name}</TableCell>
|
||
<TableCell>
|
||
<span className="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">
|
||
{user.department || "לא הוגדר"}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell>
|
||
<span className="text-sm bg-purple-100 text-purple-800 px-2 py-1 rounded">
|
||
{user.team || "לא הוגדר"}
|
||
</span>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
) : (
|
||
<div className="text-center py-8 text-gray-500">אין משתמשים בקטגוריה זו בתחום שלך</div>
|
||
)}
|
||
<div className="mt-4 text-sm text-gray-600 text-center">
|
||
סה"כ: {users.length} משתמשים מתחום {fieldName}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|