chore: handled single and multi select in filter cards

web/components/issue-layouts/filters/assignees.tsx

@@ -2,8 +2,8 @@ import React from "react";
 // lucide icons
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 // components
-import { FilterHeader } from "./filter-header";
+import { FilterHeader } from "../helpers/filter-header";
-import { FilterCard } from "./filter-card";
+import { FilterOption } from "../helpers/filter-option";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -46,7 +46,7 @@ export const FilterAssignees = observer(() => {
           {issueFilterStore?.projectMembers &&
             issueFilterStore?.projectMembers.length > 0 &&
             issueFilterStore?.projectMembers.map((_member) => (
-              <FilterCard
+              <FilterOption
                 key={`assignees-${_member?.member?.id}`}
                 isChecked={false}
                 icon={

web/components/issue-layouts/filters/created-by.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 // components
 import { MemberIcons } from "./assignees";
-import { FilterHeader } from "./filter-header";
+import { FilterHeader } from "../helpers/filter-header";
-import { FilterCard } from "./filter-card";
+import { FilterOption } from "../helpers/filter-option";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -29,7 +29,7 @@ export const FilterCreatedBy = observer(() => {
           {issueFilterStore?.projectMembers &&
             issueFilterStore?.projectMembers.length > 0 &&
             issueFilterStore?.projectMembers.map((_member) => (
-              <FilterCard
+              <FilterOption
                 key={`create-by-${_member?.member?.id}`}
                 isChecked={false}
                 icon={

web/components/issue-layouts/filters/labels.tsx

@@ -2,8 +2,8 @@ import React from "react";
 // lucide icons
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 // components
-import { FilterHeader } from "./filter-header";
+import { FilterHeader } from "../helpers/filter-header";
-import { FilterCard } from "./filter-card";
+import { FilterOption } from "../helpers/filter-option";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -34,7 +34,7 @@ export const FilterLabels = observer(() => {
           {issueFilterStore?.projectLabels &&
             issueFilterStore?.projectLabels.length > 0 &&
             issueFilterStore?.projectLabels.map((_label) => (
-              <FilterCard
+              <FilterOption
                 key={_label?.key}
                 isChecked={false}
                 icon={<LabelIcons color={_label.color} />}

web/components/issue-layouts/filters/priority.tsx

@@ -2,8 +2,8 @@ import React from "react";
 // lucide icons
 import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban, Check } from "lucide-react";
 // components
-import { FilterHeader } from "./filter-header";
+import { FilterHeader } from "../helpers/filter-header";
-import { FilterCard } from "./filter-card";
+import { FilterOption } from "../helpers/filter-option";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -68,7 +68,7 @@ export const FilterPriority = observer(() => {
           {issueFilterStore?.issueRenderFilters?.priority &&
             issueFilterStore?.issueRenderFilters?.priority.length > 0 &&
             issueFilterStore?.issueRenderFilters?.priority.map((_priority) => (
-              <FilterCard
+              <FilterOption
                 key={_priority?.key}
                 isChecked={false}
                 icon={<PriorityIcons priority={_priority.key} />}

web/components/issue-layouts/filters/start-date.tsx

@@ -2,8 +2,8 @@ import React from "react";
 // lucide icons
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 // components
-import { FilterHeader } from "./filter-header";
+import { FilterHeader } from "../helpers/filter-header";
-import { FilterCard } from "./filter-card";
+import { FilterOption } from "../helpers/filter-option";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -28,7 +28,12 @@ export const FilterStartDate = observer(() => {
           {issueFilterStore?.issueRenderFilters?.start_date &&
             issueFilterStore?.issueRenderFilters?.start_date.length > 0 &&
             issueFilterStore?.issueRenderFilters?.start_date.map((_startDate) => (
-              <FilterCard key={_startDate?.key} isChecked={false} title={_startDate.title} />
+              <FilterOption
+                key={_startDate?.key}
+                isChecked={false}
+                title={_startDate.title}
+                multiple={false}
+              />
             ))}
         </div>
       )}

web/components/issue-layouts/filters/state-group.tsx

@@ -9,8 +9,8 @@ import {
   StateGroupUnstartedIcon,
 } from "components/icons";
 // components
-import { FilterHeader } from "./filter-header";
+import { FilterHeader } from "../helpers/filter-header";
-import { FilterCard } from "./filter-card";
+import { FilterOption } from "../helpers/filter-option";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -101,7 +101,7 @@ export const FilterStateGroup = observer(() => {
           {issueFilterStore?.issueRenderFilters?.state_group &&
             issueFilterStore?.issueRenderFilters?.state_group.length > 0 &&
             issueFilterStore?.issueRenderFilters?.state_group.map((_stateGroup) => (
-              <FilterCard
+              <FilterOption
                 key={_stateGroup?.key}
                 isChecked={false}
                 icon={<StateGroupIcons stateGroup={_stateGroup.key} />}

web/components/issue-layouts/filters/state.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 // components
 import { StateGroupIcons } from "./state-group";
-import { FilterHeader } from "./filter-header";
+import { FilterHeader } from "../helpers/filter-header";
-import { FilterCard } from "./filter-card";
+import { FilterOption } from "../helpers/filter-option";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -34,7 +34,7 @@ export const FilterState = observer(() => {
               issueFilterStore?.projectStates[_stateGroup] &&
               issueFilterStore?.projectStates[_stateGroup].length > 0 &&
               issueFilterStore?.projectStates[_stateGroup].map((_state: any) => (
-                <FilterCard
+                <FilterOption
                   key={_state?.id}
                   isChecked={false}
                   icon={<StateGroupIcons stateGroup={_stateGroup} color={_state?.color} />}

web/components/issue-layouts/filters/target-date.tsx

@@ -2,8 +2,8 @@ import React from "react";
 // lucide icons
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 // components
-import { FilterHeader } from "./filter-header";
+import { FilterHeader } from "../helpers/filter-header";
-import { FilterCard } from "./filter-card";
+import { FilterOption } from "../helpers/filter-option";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -28,7 +28,12 @@ export const FilterTargetDate = observer(() => {
           {issueFilterStore?.issueRenderFilters?.due_date &&
             issueFilterStore?.issueRenderFilters?.due_date.length > 0 &&
             issueFilterStore?.issueRenderFilters?.due_date.map((_targetDate) => (
-              <FilterCard key={_targetDate?.key} isChecked={false} title={_targetDate.title} />
+              <FilterOption
+                key={_targetDate?.key}
+                isChecked={false}
+                title={_targetDate.title}
+                multiple={false}
+              />
             ))}
         </div>
       )}

web/components/issue-layouts/helpers/filter-option.tsx

@@ -2,18 +2,19 @@ import React from "react";
 // lucide icons
 import { Check } from "lucide-react";
 
-interface IFilterCard {
+interface IFilterOption {
   isChecked: boolean;
   icon?: React.ReactNode;
   title: string;
+  multiple?: boolean;
 }
 
-export const FilterCard = ({ isChecked, icon, title }: IFilterCard) => (
+export const FilterOption = ({ isChecked, icon, title, multiple = true }: IFilterOption) => (
   <div className="flex items-center gap-3 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all hover:bg-custom-border-100">
     <div
-      className={`flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center rounded-sm border border-custom-border-300 bg-custom-background-90 ${
+      className={`flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center border border-custom-border-300 bg-custom-background-90 ${
         isChecked ? `bg-custom-primary-300 text-white` : ``
-      }`}
+      } ${multiple ? `rounded-sm` : `rounded-full`}`}
     >
       {isChecked && <Check size={10} strokeWidth={2} />}
     </div>

web/pages/kanban.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import useSWR from "swr";
 // components
 import { IssueKanBanViewRoot } from "components/issue-layouts/kanban";
-import { LayoutSelection } from "components/issue-layouts/header/layout-filter";
+import { LayoutSelection } from "components/issue-layouts/layout-selection";
-import { FilterSelection } from "components/issue-layouts/header/filters";
+import { FilterSelection } from "components/issue-layouts/filters";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";