Adds filter functionality to the event history page

Implements date range, service name, region, and event type filters to enhance user experience in the event history section.

Validates date inputs to prevent logical errors, ensuring the start date is not after the end date and the end date is not in the future.

Provides a clear and user-friendly interface with options to reset filters.

Improves the event listing by filtering and ordering events based on user-selected criteria.

Author: Aloento

src/Pages/History.tsx

@@ -1,16 +1,116 @@
+import { ScaleButton, ScaleDropdownSelect, ScaleDropdownSelectItem, ScaleTextField } from "@telekom/scale-components-react";
+import dayjs from "dayjs";
 import { chain } from "lodash";
+import { useState } from "react";
 import { Helmet } from "react-helmet";
+import { EventType } from "~/Components/Event/Enums";
 import { EventItem } from "~/Components/History/EventItem";
 import { useStatus } from "~/Services/Status";
 
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 1.0.0
  */
 export function History() {
   const { DB } = useStatus();
 
+  const [filters, setFilters] = useState({
+    startDate: dayjs().add(-6, 'month').format('YYYY-MM-DD'),
+    endDate: "",
+    serviceName: "",
+    region: "",
+    eventType: "",
+  });
+
+  const [validation, setValidation] = useState({
+    startDate: "",
+    endDate: "",
+  });
+
+  function validateDates(startDate: string, endDate: string) {
+    const errors = { startDate: "", endDate: "" };
+
+    if (startDate && endDate) {
+      const start = dayjs(startDate);
+      const end = dayjs(endDate);
+
+      if (start.isAfter(end)) {
+        errors.startDate = "Start date cannot be later than end date.";
+      }
+    }
+
+    if (endDate) {
+      const end = dayjs(endDate);
+      const now = dayjs();
+
+      if (end.isAfter(now)) {
+        errors.endDate = "End date cannot be in the future.";
+      }
+    }
+
+    setValidation(errors);
+    return !errors.startDate && !errors.endDate;
+  }
+
+  function clearFilters() {
+    setFilters({
+      startDate: dayjs().add(-6, 'month').format('YYYY-MM-DD'),
+      endDate: "",
+      serviceName: "",
+      region: "",
+      eventType: "",
+    });
+    setValidation({
+      startDate: "",
+      endDate: "",
+    });
+  }
+
+  const filteredEvents = chain(DB.Events)
+    .filter(event => {
+      if (filters.startDate) {
+        const filterStart = dayjs(filters.startDate).startOf('day');
+        const eventStart = dayjs(event.Start);
+        if (eventStart.isBefore(filterStart)) return false;
+      }
+
+      if (filters.endDate) {
+        const filterEnd = dayjs(filters.endDate).endOf('day');
+        const eventStart = dayjs(event.Start);
+        const eventEnd = event.End ? dayjs(event.End) : eventStart;
+        if (eventEnd.isAfter(filterEnd)) return false;
+      }
+
+      if (filters.serviceName) {
+        const serviceNames = Array.from(event.RegionServices)
+          .map(rs => ({
+            name: rs.Service.Name.toLowerCase(),
+            abbr: rs.Service.Abbr.toLowerCase()
+          }));
+        const searchTerm = filters.serviceName.toLowerCase();
+        const hasService = serviceNames.some(service =>
+          service.name.includes(searchTerm) || service.abbr.includes(searchTerm)
+        );
+        if (!hasService) return false;
+      }
+
+      if (filters.region) {
+        const regionNames = Array.from(event.RegionServices)
+          .map(rs => rs.Region.Name);
+        const hasRegion = regionNames.includes(filters.region);
+        if (!hasRegion) return false;
+      }
+
+      if (filters.eventType && event.Type !== filters.eventType) {
+        return false;
+      }
+
+      return true;
+    })
+    .orderBy(x => x.Start, "desc")
+    .value();
+
   return <>
     <Helmet>
       <title>Timeline - OTC Status Dashboard</title>
@@ -22,9 +122,101 @@ export function History() {
       </h3>
     </section>
 
+    <section className="flex flex-col rounded-lg bg-white shadow-md p-5 gap-y-1.5">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+        <ScaleTextField
+          type="date"
+          label="Start Date"
+          placeholder="Select start date"
+          value={filters.startDate}
+          invalid={!!validation.startDate}
+          helperText={validation.startDate}
+          onScale-input={(e) => {
+            const newStartDate = e.target.value as string;
+            setFilters(prev => ({
+              ...prev,
+              startDate: newStartDate
+            }));
+            validateDates(newStartDate, filters.endDate);
+          }}
+        />
+
+        <ScaleTextField
+          type="date"
+          label="End Date"
+          placeholder="Select end date"
+          value={filters.endDate}
+          invalid={!!validation.endDate}
+          helperText={validation.endDate}
+          onScale-input={(e) => {
+            const newEndDate = e.target.value as string;
+            setFilters(prev => ({
+              ...prev,
+              endDate: newEndDate
+            }));
+            validateDates(filters.startDate, newEndDate);
+          }}
+        />
+
+        <ScaleTextField
+          label="Service Name"
+          placeholder="Search service name"
+          value={filters.serviceName}
+          onScale-input={(e) => setFilters(prev => ({
+            ...prev,
+            serviceName: e.target.value as string
+          }))}
+        />
+
+        <ScaleDropdownSelect
+          label="Region"
+          value={filters.region}
+          onScale-change={(e) => setFilters(prev => ({
+            ...prev,
+            region: e.target.value as string
+          }))}
+        >
+          <ScaleDropdownSelectItem value="">All Regions</ScaleDropdownSelectItem>
+          {DB.Regions.map((region, i) => (
+            <ScaleDropdownSelectItem value={region.Name} key={i}>
+              {region.Name}
+            </ScaleDropdownSelectItem>
+          ))}
+        </ScaleDropdownSelect>
+
+        <ScaleDropdownSelect
+          label="Event Type"
+          value={filters.eventType}
+          onScale-change={(e) => setFilters(prev => ({
+            ...prev,
+            eventType: e.target.value as string
+          }))}
+        >
+          <ScaleDropdownSelectItem value="">All Types</ScaleDropdownSelectItem>
+          {Object.values(EventType).slice(1).map((type, i) => (
+            <ScaleDropdownSelectItem value={type} key={i}>
+              {type}
+            </ScaleDropdownSelectItem>
+          ))}
+        </ScaleDropdownSelect>
+      </div>
+
+      <div className="flex justify-between items-center mt-4">
+        <span className="text-sm text-gray-600">
+          Found {filteredEvents.length} events, {DB.Events.length - filteredEvents.length} filtered out
+        </span>
+        <ScaleButton
+          variant="secondary"
+          size="small"
+          onClick={clearFilters}
+        >
+          Clear Filters
+        </ScaleButton>
+      </div>
+    </section>
+
     <ol className="flex flex-col pl-3 xl:pl-0">
-      {chain(DB.Events)
-        .orderBy(x => x.Start, "desc")
+      {chain(filteredEvents)
         .map((event, index, events) => [events[index - 1], event])
         .map(([prev, curr]) => (
           <EventItem key={curr.Id} Prev={prev} Curr={curr} />