chore(env): update application version to 2.2.7 in production environment

feat(image-upload): introduce ImageUploadField component for enhanced image uploads

- Added ImageUploadField component to streamline image uploads with improved UI and functionality.
- Integrated file upload handling with a new file service for better management of image uploads.
- Updated SectionStep component to utilize ImageUploadField for icon uploads, enhancing user experience.
- Refactored TenderListFilters to use isDateRangeActive utility for improved date range filtering logic.

src/app/marketing/_components/SectionStep.tsx

@@ -3,10 +3,11 @@ import { TrashIcon } from "@/assets/icons";
 import InputGroup from "@/components/FormElements/InputGroup";
 import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
-import { REGEX } from "@/constants/regex";
+import ImageUploadField from "@/components/ui/ImageUploadField";
 import { FormErrorMessages } from "@/constants/Texts";
 import {
   Control,
+  Controller,
   FieldErrors,
   FieldValues,
   Path,
@@ -16,6 +17,20 @@ import {
   UseFormRegister,
 } from "react-hook-form";
 
+const ICON_ACCEPT =
+  "image/png,image/jpeg,image/jpg,image/webp,image/svg+xml,image/gif";
+const ICON_ALLOWED_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "image/webp",
+  "image/svg+xml",
+  "image/gif",
+];
+
+const slugify = (value: string) =>
+  value.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+
 interface IProps<T extends FieldValues> {
   title: string;
   fields: any[];
@@ -39,6 +54,7 @@ const SectionStep = <T extends FieldValues>({
   errors,
   append,
   remove,
+  control,
   fieldName,
   defaultValues,
 }: IProps<T>) => {
@@ -82,22 +98,30 @@ const SectionStep = <T extends FieldValues>({
               key={field.id}
               className="grid grid-cols-1 gap-4 sm:grid-cols-2"
             >
-              <InputGroup
-                {...register(`cards.${index}.icon` as Path<T>, {
+              <Controller
+                control={control}
+                name={`cards.${index}.icon` as Path<T>}
+                rules={{
                   required: {
                     message: FormErrorMessages.required,
                     value: true,
                   },
-                  pattern: {
-                    message: FormErrorMessages.invalidPattern,
-                    value: REGEX.URL,
-                  },
-                })}
-                label="Icon"
-                name={`cards.${index}.icon`}
-                required
-                type="text"
-                placeholder="Enter Icon URL"
+                }}
+                render={({ field, fieldState }) => (
+                  <ImageUploadField
+                    value={(field.value as string) ?? ""}
+                    onChange={field.onChange}
+                    label="Icon"
+                    inputId={`${slugify(title)}-card-icon-${index}`}
+                    title="Click to upload an icon"
+                    hint="PNG, JPG, WEBP, SVG, GIF up to 5MB"
+                    recommendation="Recommended size: 128 x 128"
+                    fallbackFileName="Current icon"
+                    accept={ICON_ACCEPT}
+                    allowedTypes={ICON_ALLOWED_TYPES}
+                    errorMessage={fieldState.error?.message as string}
+                  />
+                )}
               />
               <InputGroup
                 {...register(`cards.${index}.title` as Path<T>, {