feat: added labels in filters (#585)

* feat: added labels in filters

* fix: added labels in fetch keys

apps/app/components/views/select-filters.tsx

@@ -5,6 +5,7 @@ import useSWR from "swr";
 // services
 import stateService from "services/state.service";
 import projectService from "services/project.service";
+import issuesService from "services/issues.service";
 // ui
 import { Avatar, MultiLevelDropdown } from "components/ui";
 // icons
@@ -14,7 +15,7 @@ import { getStatesList } from "helpers/state.helper";
 // types
 import { IIssueFilterOptions, IQuery } from "types";
 // fetch-keys
-import { PROJECT_MEMBERS, STATE_LIST } from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATE_LIST } from "constants/fetch-keys";
 // constants
 import { PRIORITIES } from "constants/project";
 
@@ -49,6 +50,13 @@ export const SelectFilters: React.FC<Props> = ({
       : null
   );
 
+  const { data: issueLabels } = useSWR(
+    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
+      : null
+  );
+
   return (
     <MultiLevelDropdown
       label="Filters"
@@ -142,6 +150,27 @@ export const SelectFilters: React.FC<Props> = ({
             })) ?? []),
           ],
         },
+        {
+          id: "labels",
+          label: "Labels",
+          value: issueLabels,
+          children: [
+            ...(issueLabels?.map((label) => ({
+              id: label.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 rounded-full" style={{ backgroundColor: label.color }} />
+                  {label.name}
+                </div>
+              ),
+              value: {
+                key: "labels",
+                value: label.id,
+              },
+              selected: filters?.labels?.includes(label.id),
+            })) ?? []),
+          ],
+        },
       ]}
     />
   );