enhanced filters in coverMe report

pages/cart/reports/coverMe.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 import axiosInstance from "../../../src/axiosSecure";
-import { useRouter } from "next/router";
-import Link from "next/link";
 import { useSession } from "next-auth/react";
 import Layout from "../../../components/layout";
 import ProtectedRoute from "../../../components/protectedRoute";
@@ -14,24 +12,28 @@ const timeFilters = [
     { label: "Всички", value: null },
 ];
 
+const eventTypes = [
+    { label: "Заявки", value: EventLogType.AssignmentReplacementRequested },
+    { label: "Приети замествания", value: EventLogType.AssignmentReplacementAccepted },
+    { label: "Ръчно въведени замествания", value: EventLogType.AssignmentReplacementManual },
+];
+
 export default function EventLogList() {
     const [eventLogs, setEventLog] = useState([]);
     const [requestedAssignments, setRequestedAssignments] = useState([]);
-    const [locations, setLocations] = useState([]);
     const [showOpenRequests, setShowOpenRequests] = useState(false);
     const [selectedTimeFilter, setSelectedTimeFilter] = useState(null); // Time filter state
+    const [selectedEventTypes, setSelectedEventTypes] = useState(eventTypes.map((et) => et.value)); // Default: all types
     const { data: session } = useSession();
 
     useEffect(() => {
-        const fetchLocations = async () => {
+        const fetchEventLogs = async () => {
             try {
-                const where = encodeURIComponent(JSON.stringify({
+                const where = encodeURIComponent(
-                    OR: [
+                    JSON.stringify({
-                        { type: EventLogType.AssignmentReplacementAccepted },
+                        OR: selectedEventTypes.map((type) => ({ type })),
-                        { type: EventLogType.AssignmentReplacementManual },
+                    })
-                        { type: EventLogType.AssignmentReplacementRequested }
+                );
-                    ],
-                }));
 
                 const { data: eventLogsData } = await axiosInstance.get(
                     `/api/data/prisma/eventLog?where=${where}&include={"publisher":{"select":{"firstName":true,"lastName":true}},"shift":{"include":{"assignments":{"include":{"publisher":{"select":{"firstName":true,"lastName":true}}}}}}}`
@@ -48,10 +50,8 @@ export default function EventLogList() {
             }
         };
 
-        if (!locations.length) {
+        fetchEventLogs();
-            fetchLocations();
+    }, [selectedEventTypes]);
-        }
-    }, []);
 
     // Filter events based on the selected time range
     const filteredEventLogs = eventLogs.filter((event) => {
@@ -62,6 +62,15 @@ export default function EventLogList() {
         return eventDate >= cutoffDate;
     });
 
+    // Toggle event type selection
+    const toggleEventType = (eventType) => {
+        setSelectedEventTypes((prev) =>
+            prev.includes(eventType)
+                ? prev.filter((type) => type !== eventType)
+                : [...prev, eventType]
+        );
+    };
+
     return (
         <Layout>
             <ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN]}>
@@ -82,10 +91,10 @@ export default function EventLogList() {
                                     checked={!showOpenRequests}
                                     className="sr-only"
                                 />
-                                Приети заявки
+                                Приети/затворени заявки
                             </label>
                             <label
-                                className={`cursor-pointer px-4 py-2 rounded-full ${showOpenRequests ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-800"
+                                className={`cursor-pointer px-4 py-2 rounded-full ${showOpenRequests ? "bg-yellow-500 text-white" : "bg-yellow-100 text-gray-800"
                                     }`}
                             >
                                 <input
@@ -100,6 +109,23 @@ export default function EventLogList() {
                             </label>
                         </div>
 
+
+
+                        {/* Event Type Filter Pills */}
+                        <div className="flex gap-2 mb-4">
+                            {eventTypes.map((type) => (
+                                <button
+                                    key={type.value}
+                                    onClick={() => toggleEventType(type.value)}
+                                    className={`px-4 py-2 rounded-full ${selectedEventTypes.includes(type.value)
+                                        ? "bg-blue-500 text-white"
+                                        : "bg-gray-200 text-gray-800"
+                                        }`}
+                                >
+                                    {type.label}
+                                </button>
+                            ))}
+                        </div>
                         {/* Time Filter Pills */}
                         <div className="flex gap-2 mb-4">
                             {timeFilters.map((filter) => (
@@ -115,7 +141,6 @@ export default function EventLogList() {
                                 </button>
                             ))}
                         </div>
-
                         <div className="mt-4 w-full overflow-x-auto">
                             <table className="w-full table-auto">
                                 <thead>