refactor(tender-details): enhance translation page tests and layout

- Updated Cypress tests for the tender translation page to improve visibility checks and streamline assertions.
- Refactored test structure to utilize a dedicated function for fetching the visible title heading.
- Adjusted test cases to ensure accurate language switching and URL handling for tender details.
- Improved layout consistency in the translation page by refining element visibility checks and ensuring proper section rendering.

src/components/Tables/tenders/TenderListFilters.tsx

@@ -1,3 +1,4 @@
+import DatePicker from "@/components/FormElements/DatePicker/DatePicker";
 import InputGroup from "@/components/FormElements/InputGroup";
 import { Select } from "@/components/FormElements/select";
 import { Button } from "@/components/ui-elements/button";
@@ -6,6 +7,7 @@ import { TenderStatus } from "@/constants/enums";
 import { Languages } from "@/constants/languages";
 import { getEnumAsArray } from "@/utils/shared";
 import {
+  Control,
   FieldValues,
   UseFormHandleSubmit,
   UseFormRegister,
@@ -15,6 +17,7 @@ import {
 
 interface TenderListFiltersProps {
   filterRegister: UseFormRegister<FieldValues>;
+  control: Control<FieldValues>;
   setIsFilterModalOpen: (isOpen: boolean) => void;
   isMutating: number;
   handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
@@ -25,6 +28,7 @@ interface TenderListFiltersProps {
 
 const TenderListFilters = ({
   filterRegister,
+  control,
   setIsFilterModalOpen,
   isMutating,
   handleFilterSubmit,
@@ -37,11 +41,22 @@ const TenderListFilters = ({
       className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
       onSubmit={handleFilterSubmit(search)}
     >
+      <InputGroup
+        {...filterRegister("q")}
+        name="q"
+        label="keyword"
+        type="text"
+      />
       <InputGroup
         {...filterRegister("title")}
         name="title"
         label="title"
-        placeholder="Title"
+        type="text"
+      />
+      <InputGroup
+        {...filterRegister("description")}
+        name="description"
+        label="description"
         type="text"
       />
       <Select
@@ -49,27 +64,100 @@ const TenderListFilters = ({
         items={getEnumAsArray(TenderStatus)}
         label="status"
         name="status"
-        placeholder="Status"
         clearable
         value={watch("status")}
         onClear={() => setValue("status", undefined)}
       />
+      <InputGroup
+        {...filterRegister("country")}
+        name="country"
+        label="country"
+        type="text"
+      />
       <Select
         {...filterRegister("country_code")}
         items={Countries}
         label="country code"
         name="country_code"
-        placeholder="Country Code"
         clearable
         value={watch("country_code")}
         onClear={() => setValue("country_code", undefined)}
       />
+      <InputGroup
+        {...filterRegister("country_codes")}
+        name="country_codes"
+        label="country codes"
+        type="text"
+      />
+      <InputGroup
+        {...filterRegister("notice_type")}
+        name="notice_type"
+        label="notice type"
+        type="text"
+      />
+      <InputGroup
+        {...filterRegister("notice_types")}
+        name="notice_types"
+        label="notice types"
+        type="text"
+      />
+      <InputGroup
+        {...filterRegister("form_types")}
+        name="form_types"
+        label="form types"
+        type="text"
+      />
+      <InputGroup
+        {...filterRegister("main_classification")}
+        name="main_classification"
+        label="main classification"
+        type="text"
+      />
+      <InputGroup
+        {...filterRegister("classifications")}
+        name="classifications"
+        label="classifications"
+        type="text"
+      />
+      <InputGroup
+        {...filterRegister("cpv_codes")}
+        name="cpv_codes"
+        label="cpv codes"
+        type="text"
+      />
+      <DatePicker
+        control={control}
+        name="created_at_range"
+        label="created at range"
+        range
+        timePicker
+      />
+      <DatePicker
+        control={control}
+        name="tender_deadline_range"
+        label="tender deadline range"
+        range
+        timePicker
+      />
+      <DatePicker
+        control={control}
+        name="publication_date_range"
+        label="publication date range"
+        range
+        timePicker
+      />
+      <DatePicker
+        control={control}
+        name="submission_deadline_range"
+        label="submission deadline range"
+        range
+        timePicker
+      />
       <Select
         {...filterRegister("lang")}
         items={Languages}
         label="language"
         name="lang"
-        placeholder="Language"
         clearable
         value={watch("lang")}
         onClear={() => setValue("lang", undefined)}
@@ -83,10 +171,10 @@ const TenderListFilters = ({
           className="mt-6 w-fit capitalize"
           label={
             isMutating ? (
-            <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
-          ) : (
-            <span>Search</span>
-          )
+              <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
+            ) : (
+              <span>Search</span>
+            )
           }
         />
         <Button

src/components/Tables/tenders/index.tsx

@@ -41,6 +41,7 @@ const TendersTable = () => {
     search,
     watch,
     setFilterValue,
+    control,
     isMutating,
     shouldShowPagination,
   } = useTenderListPresenter();
@@ -167,6 +168,7 @@ const TendersTable = () => {
         <TenderListFilters
           setValue={setFilterValue}
           filterRegister={filterRegister}
+          control={control}
           handleFilterSubmit={handleFilterSubmit}
           isMutating={isMutating as number}
           search={search}

src/components/Tables/tenders/useTenderListPresenter.ts

@@ -8,6 +8,110 @@ import { useIsMutating } from "@tanstack/react-query";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+
+const COMMA_SEPARATED_FILTER_KEYS = new Set([
+  "country_codes",
+  "notice_types",
+  "form_types",
+  "classifications",
+  "cpv_codes",
+]);
+
+const normalizeFilterValues = (values: Record<string, any>) => {
+  const normalized: Record<string, any> = {};
+
+  for (const [key, value] of Object.entries(values)) {
+    if (value === undefined || value === null) {
+      continue;
+    }
+
+    if (typeof value === "string") {
+      const trimmedValue = value.trim();
+      if (!trimmedValue) {
+        continue;
+      }
+
+      if (COMMA_SEPARATED_FILTER_KEYS.has(key)) {
+        normalized[key] = trimmedValue
+          .split(",")
+          .map((item) => item.trim())
+          .filter(Boolean)
+          .join(",");
+        continue;
+      }
+
+      normalized[key] = trimmedValue;
+      continue;
+    }
+
+    normalized[key] = value;
+  }
+
+  return normalized;
+};
+
+const mapDateRangeFilters = (values: Record<string, any>) => {
+  const mappedValues = { ...values };
+
+  const mapRange = ({
+    key,
+    fromKey,
+    toKey,
+    aliases = [],
+  }: {
+    key: string;
+    fromKey: string;
+    toKey: string;
+    aliases?: Array<{ from: string; to: string }>;
+  }) => {
+    const rangeValue = mappedValues[key];
+    if (!Array.isArray(rangeValue)) {
+      return;
+    }
+
+    const [from, to] = rangeValue;
+    if (from !== undefined && from !== null && from !== "") {
+      mappedValues[fromKey] = from;
+      aliases.forEach((alias) => {
+        mappedValues[alias.from] = from;
+      });
+    }
+
+    if (to !== undefined && to !== null && to !== "") {
+      mappedValues[toKey] = to;
+      aliases.forEach((alias) => {
+        mappedValues[alias.to] = to;
+      });
+    }
+
+    delete mappedValues[key];
+  };
+
+  mapRange({
+    key: "created_at_range",
+    fromKey: "created_at_from",
+    toKey: "created_at_to",
+  });
+  mapRange({
+    key: "tender_deadline_range",
+    fromKey: "tender_deadline_from",
+    toKey: "tender_deadline_to",
+    aliases: [{ from: "deadline_from", to: "deadline_to" }],
+  });
+  mapRange({
+    key: "publication_date_range",
+    fromKey: "publication_date_from",
+    toKey: "publication_date_to",
+  });
+  mapRange({
+    key: "submission_deadline_range",
+    fromKey: "submission_deadline_from",
+    toKey: "submission_deadline_to",
+    aliases: [{ from: "submission_date_from", to: "submission_date_to" }],
+  });
+
+  return mappedValues;
+};
 const useTenderListPresenter = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
@@ -27,6 +131,7 @@ const useTenderListPresenter = () => {
     reset: filterFormReset,
     watch,
     setValue: setFilterValue,
+    control,
   } = useForm();
 
   useEffect(() => {
@@ -48,7 +153,9 @@ const useTenderListPresenter = () => {
     !isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
 
   const search = (data: any) => {
-    const newParams = { ...params, ...data, offset: 0 };
+    const mappedDateRanges = mapDateRangeFilters(data);
+    const normalizedData = normalizeFilterValues(mappedDateRanges);
+    const newParams = { ...params, ...normalizedData, offset: 0 };
     const cleanedParams = deleteEmptyKeys(newParams);
     const queryString = new URLSearchParams(cleanedParams).toString();
     router.push(`${pathName}?${queryString}`);
@@ -88,6 +195,7 @@ const useTenderListPresenter = () => {
     search,
     watch,
     setFilterValue,
+    control,
     isMutating,
     shouldShowPagination,
   };