82 lines
3.6 KiB
TypeScript
82 lines
3.6 KiB
TypeScript
import DashboardLayout from "@/components/DashboardLayout"
|
|
import { prisma } from "@/lib/prisma"
|
|
import Link from "next/link"
|
|
|
|
export default async function ManagersPage() {
|
|
const managers = await prisma.shiftManager.findMany({
|
|
include: {
|
|
teams: true
|
|
},
|
|
orderBy: { empNo: "asc" }
|
|
})
|
|
|
|
return (
|
|
<DashboardLayout requiredRole="admin">
|
|
<div>
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h1 className="text-3xl font-bold text-gray-800">Shift Managers</h1>
|
|
<Link
|
|
href="/admin/managers/create"
|
|
className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
+ Add Manager
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Emp No</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Phone</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Team(s)</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
{managers.map((manager) => (
|
|
<tr key={manager.id}>
|
|
<td className="px-6 py-4 text-sm text-gray-900">{manager.empNo}</td>
|
|
<td className="px-6 py-4 text-sm text-gray-900">
|
|
{manager.firstName} {manager.surname}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{manager.email}</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">{manager.phone}</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600">
|
|
{manager.teams.length > 0 ? (
|
|
<div className="flex flex-wrap gap-1">
|
|
{manager.teams.map((team) => (
|
|
<span key={team.id} className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
|
|
{team.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span className="text-gray-400 italic">No team assigned</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm">
|
|
<span className={`px-3 py-1 rounded-full text-xs font-medium ${
|
|
manager.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
|
|
}`}>
|
|
{manager.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-sm">
|
|
<Link href={`/admin/managers/${manager.id}`} className="text-blue-600 hover:underline">
|
|
Edit
|
|
</Link>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
)
|
|
}
|