Adding Services Dropdown in Image Gallery.

src/pages/ImageGallery/ImageGalleryPage.jsx

@@ -6,7 +6,7 @@ import eventBus from "../../services/eventBus";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import useImageGallery from "../../hooks/useImageGallery";
-import { useProjectName } from "../../hooks/useProjects";
+import { useProjectAssignedServices, useProjectName } from "../../hooks/useProjects";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import ImageGalleryListView from "../../components/ImageGallery/ImageGalleryListView";
 import ImageGalleryFilters from "../../components/ImageGallery/ImageGalleryFilters";
@@ -22,6 +22,15 @@ const ImageGalleryPage = () => {
   const { openModal } = useModal();
   const { setOffcanvasContent, setShowTrigger } = useFab();
 
+  const { data: assignedServices = [], isLoading: servicesLoading } =
+    useProjectAssignedServices(selectedProjectId);
+
+  const [selectedService, setSelectedService] = useState("");
+
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
+
   useEffect(() => {
     if (!selectedProjectId && projectNames?.length) {
       dispatch(setProjectId(projectNames[0].id));
@@ -182,10 +191,36 @@ const ImageGalleryPage = () => {
       {/* Card wrapper */}
       <div className="card shadow-sm">
         <div className="card-body">
+          <div className="dataTables_length text-start py-1 px-0 col-md-4 col-12 mb-3">
+            {!servicesLoading && assignedServices?.length > 0 && (
+              assignedServices.length > 1 ? (
+                <label>
+                  <select
+                    name="DataTables_Table_0_length"
+                    aria-controls="DataTables_Table_0"
+                    className="form-select form-select-sm"
+                    aria-label="Select Service"
+                    value={selectedService}
+                    onChange={handleServiceChange}
+                    style={{ fontSize: "0.875rem", height: "35px", width: "200px" }}
+                  >
+                    <option value="">All Services</option>
+                    {assignedServices.map((service) => (
+                      <option key={service.id} value={service.id}>
+                        {service.name}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              ) : (
+                <h5>{assignedServices[0].name}</h5>
+              )
+            )}
+          </div>
 
           {/* Filter Chips */}
           {appliedFiltersChips.length > 0 && (
-            <div className="mb-3 d-flex flex-wrap align-items-center gap-2">
+            <div className="mb-3 d-flex flex-wrap align-items-center gap-2 mb-3">
               <strong className="me-2 fs-6">Filters:</strong>
               {appliedFiltersChips.map((chip, idx) => (
                 <span key={idx} className="d-flex align-items-center bg-label-secondary px-2 py-1 rounded me-1">