136 lines
6.0 KiB
JavaScript
136 lines
6.0 KiB
JavaScript
import React from "react";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Eye, MoreVertical, Users } from "lucide-react";
|
|
import { format } from "date-fns";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { createPageUrl } from "@/utils";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
HoverCard,
|
|
HoverCardContent,
|
|
HoverCardTrigger,
|
|
} from "@/components/ui/hover-card";
|
|
|
|
const statusColors = {
|
|
Active: "bg-blue-100 text-blue-800 border-blue-200",
|
|
Pending: "bg-yellow-100 text-yellow-800 border-yellow-200",
|
|
Confirmed: "bg-purple-100 text-purple-800 border-purple-200",
|
|
Completed: "bg-green-100 text-green-800 border-green-200",
|
|
Canceled: "bg-red-100 text-red-800 border-red-200"
|
|
};
|
|
|
|
export default function EventsTable({ events }) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-slate-50">
|
|
<TableHead className="font-semibold">ID</TableHead>
|
|
<TableHead className="font-semibold">Hub</TableHead>
|
|
<TableHead className="font-semibold">Status</TableHead>
|
|
<TableHead className="font-semibold">Date</TableHead>
|
|
<TableHead className="font-semibold">Event Name</TableHead>
|
|
<TableHead className="font-semibold">PO</TableHead>
|
|
<TableHead className="font-semibold text-center">Requested</TableHead>
|
|
<TableHead className="font-semibold text-center">Assigned</TableHead>
|
|
<TableHead className="font-semibold">Total</TableHead>
|
|
<TableHead className="font-semibold text-center">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{events.length > 0 ? (
|
|
events.map((event) => (
|
|
<TableRow key={event.id} className="hover:bg-slate-50 transition-colors">
|
|
<TableCell className="font-medium">{event.id?.slice(0, 8)}</TableCell>
|
|
<TableCell>
|
|
<div>
|
|
<p className="font-medium text-slate-900">{event.hub}</p>
|
|
{event.event_location && (
|
|
<p className="text-xs text-slate-500 truncate max-w-xs">{event.event_location}</p>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge className={`${statusColors[event.status]} border font-medium`}>
|
|
{event.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
{event.date ? format(new Date(event.date), "MMM d, yyyy") : "-"}
|
|
</TableCell>
|
|
<TableCell className="font-medium">{event.event_name}</TableCell>
|
|
<TableCell>{event.po || "-"}</TableCell>
|
|
<TableCell className="text-center">{event.requested || 0}</TableCell>
|
|
<TableCell className="text-center">
|
|
{event.assigned_staff && event.assigned_staff.length > 0 ? (
|
|
<HoverCard>
|
|
<HoverCardTrigger asChild>
|
|
<button className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 font-medium">
|
|
<Users className="w-4 h-4" />
|
|
{event.assigned_staff.length}
|
|
</button>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent className="w-80">
|
|
<div className="space-y-2">
|
|
<h4 className="font-semibold text-sm">Assigned Staff:</h4>
|
|
<div className="space-y-2">
|
|
{event.assigned_staff.map((staff, idx) => (
|
|
<div key={idx} className="flex items-center gap-2 text-sm">
|
|
<div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
|
|
{staff.staff_name?.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">{staff.staff_name}</p>
|
|
{staff.position && (
|
|
<p className="text-xs text-slate-500">{staff.position}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
) : (
|
|
<span className="text-slate-400">0</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="font-semibold">${event.total?.toFixed(2) || "0.00"}</TableCell>
|
|
<TableCell>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<MoreVertical className="w-4 h-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => navigate(createPageUrl(`EditEvent?id=${event.id}`))}>
|
|
<Eye className="w-4 h-4 mr-2" />
|
|
View Details
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={10} className="text-center py-8 text-slate-500">
|
|
No events found
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
} |