+ {key === "state_group"
+ ? filters.state_group?.map((stateGroup) => {
+ const group = stateGroup as TStateGroups;
+
+ return (
+
+
+
+
+ {group}
+
+ setFilters({
+ state_group: filters.state_group?.filter((g) => g !== group),
+ })
+ }
+ >
+
+
+
+ );
+ })
+ : key === "priority"
+ ? filters.priority?.map((priority: any) => (
+
+
+
+
+ {priority === "null" ? "None" : priority}
+
+ setFilters({
+ priority: filters.priority?.filter((p: any) => p !== priority),
+ })
+ }
+ >
+
+
+
+ ))
+ : key === "assignees"
+ ? filters.assignees?.map((memberId: string) => {
+ const member = members?.find((m) => m.id === memberId);
+ return (
+
+
+
{member?.display_name}
+
+ setFilters({
+ assignees: filters.assignees?.filter((p: any) => p !== memberId),
+ })
+ }
+ >
+
+
+
+ );
+ })
+ : key === "subscriber"
+ ? filters.subscriber?.map((memberId: string) => {
+ const member = members?.find((m) => m.id === memberId);
+
+ return (
+
+
+
{member?.display_name}
+
+ setFilters({
+ assignees: filters.assignees?.filter((p: any) => p !== memberId),
+ })
+ }
+ >
+
+
+
+ );
+ })
+ : key === "created_by"
+ ? filters.created_by?.map((memberId: string) => {
+ const member = members?.find((m) => m.id === memberId);
+
+ return (
+
+
+
{member?.display_name}
+
+ setFilters({
+ created_by: filters.created_by?.filter(
+ (p: any) => p !== memberId
+ ),
+ })
+ }
+ >
+
+
+
+ );
+ })
+ : key === "labels"
+ ? filters.labels?.map((labelId: string) => {
+ const label = labels?.find((l) => l.id === labelId);
+
+ if (!label) return null;
+ const color = label.color !== "" ? label.color : "#0f172a";
+ return (
+
+
+
{label.name}
+
+ setFilters({
+ labels: filters.labels?.filter((l: any) => l !== labelId),
+ })
+ }
+ >
+
+
+
+ );
+ })
+ : key === "start_date"
+ ? filters.start_date?.map((date: string) => {
+ if (filters.start_date && filters.start_date.length <= 0) return null;
+
+ const splitDate = date.split(";");
+
+ return (
+
+
+
+ {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
+
+
+ setFilters({
+ start_date: filters.start_date?.filter((d: any) => d !== date),
+ })
+ }
+ >
+
+
+
+ );
+ })
+ : key === "target_date"
+ ? filters.target_date?.map((date: string) => {
+ if (filters.target_date && filters.target_date.length <= 0) return null;
+
+ const splitDate = date.split(";");
+
+ return (
+
+
+
+ {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
+
+
+ setFilters({
+ target_date: filters.target_date?.filter((d: any) => d !== date),
+ })
+ }
+ >
+
+
+
+ );
+ })
+ : key === "project"
+ ? filters.project?.map((projectId) => {
+ const currentProject = project?.find((p) => p.id === projectId);
+ return (
+
+ {currentProject?.name}
+
+ setFilters({
+ project: filters.project?.filter((p) => p !== projectId),
+ })
+ }
+ >
+
+
+
+ );
+ })
+ : (filters[key] as any)?.join(", ")}
+
+