snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import type { TCycleEstimateType } from "@plane/types";
+import { EEstimateSystem } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useCycle } from "@/hooks/store/use-cycle";
+// local imports
+import { cycleEstimateOptions } from "../analytics-sidebar/issue-progress";
+
+type TProps = {
+  value: TCycleEstimateType;
+  onChange: (value: TCycleEstimateType) => Promise<void>;
+  showDefault?: boolean;
+  projectId: string;
+  cycleId: string;
+};
+
+export const EstimateTypeDropdown = observer(function EstimateTypeDropdown(props: TProps) {
+  const { value, onChange, projectId, cycleId, showDefault = false } = props;
+  const { getIsPointsDataAvailable } = useCycle();
+  const { areEstimateEnabledByProjectId, currentProjectEstimateType } = useProjectEstimates();
+  const isCurrentProjectEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId) ? true : false;
+  return (getIsPointsDataAvailable(cycleId) || isCurrentProjectEstimateEnabled) &&
+    currentProjectEstimateType !== EEstimateSystem.CATEGORIES ? (
+    <div className="relative flex items-center gap-2">
+      <CustomSelect
+        value={value}
+        label={<span>{cycleEstimateOptions.find((v) => v.value === value)?.label ?? "None"}</span>}
+        onChange={onChange}
+        maxHeight="lg"
+        buttonClassName="bg-surface-2 border-none rounded-sm text-13 font-medium "
+      >
+        {cycleEstimateOptions.map((item) => (
+          <CustomSelect.Option key={item.value} value={item.value}>
+            {item.label}
+          </CustomSelect.Option>
+        ))}
+      </CustomSelect>
+    </div>
+  ) : showDefault ? (
+    <span className="capitalize">{cycleEstimateOptions.find((v) => v.value === value)?.label ?? value}</span>
+  ) : null;
+});

apps/web/core/components/cycles/dropdowns/filters/end-date.tsx

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+import { isInDateFormat } from "@plane/utils";
+// components
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterEndDate = observer(function FilterEndDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Due date"
+        />
+      )}
+      <FilterHeader
+        title={`Due date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/cycles/dropdowns/filters/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./end-date";
+export * from "./root";
+export * from "./start-date";
+export * from "./status";

apps/web/core/components/cycles/dropdowns/filters/root.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TCycleFilters, TCycleGroups } from "@plane/types";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { FilterEndDate } from "./end-date";
+import { FilterStartDate } from "./start-date";
+import { FilterStatus } from "./status";
+
+type Props = {
+  filters: TCycleFilters;
+  handleFiltersUpdate: (key: keyof TCycleFilters, value: string | string[]) => void;
+  isArchived?: boolean;
+};
+
+export const CycleFiltersSelection = observer(function CycleFiltersSelection(props: Props) {
+  const { filters, handleFiltersUpdate, isArchived = false } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchOutline className="text-placeholder" width={12} height={12} />
+          <input
+            type="text"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus={!isMobile}
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <CloseOutline className="text-tertiary" height={12} width={12} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
+        {/* cycle status */}
+        {!isArchived && (
+          <div className="py-2">
+            <FilterStatus
+              appliedFilters={(filters.status as TCycleGroups[]) ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("status", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* start date */}
+        <div className="py-2">
+          <FilterStartDate
+            appliedFilters={filters.start_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* end date */}
+        <div className="py-2">
+          <FilterEndDate
+            appliedFilters={filters.end_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("end_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});

apps/web/core/components/cycles/dropdowns/filters/start-date.tsx

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+// components
+import { isInDateFormat } from "@plane/utils";
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+// helpers
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterStartDate = observer(function FilterStartDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Start date"
+        />
+      )}
+      <FilterHeader
+        title={`Start date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/cycles/dropdowns/filters/status.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { CYCLE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TCycleGroups } from "@plane/types";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// types
+// constants
+
+type Props = {
+  appliedFilters: TCycleGroups[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStatus = observer(function FilterStatus(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  //hooks
+  const { t } = useTranslation();
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+  const filteredOptions = CYCLE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Status of the cycle${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((status) => (
+              <FilterOption
+                key={status.value}
+                isChecked={appliedFilters?.includes(status.value) ? true : false}
+                onClick={() => handleUpdate(status.value)}
+                title={t(status.i18n_title)}
+              />
+            ))
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/cycles/dropdowns/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filters";
+export * from "./estimate-type-dropdown";