feat: init

apps/web/core/components/modules/analytics-sidebar/index.ts

@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./issue-progress";
+export * from "./progress-stats";

apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import type { FC } from "react";
+import { Fragment, useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+import { AlertCircle, ChevronUp, ChevronDown } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
+import { EEstimateSystem } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TModulePlotType } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { CustomSelect, Spinner } from "@plane/ui";
+// components
+// constants
+// helpers
+import { getDate } from "@plane/utils";
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { ModuleProgressStats } from "@/components/modules";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useModule } from "@/hooks/store/use-module";
+import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
+// plane web constants
+type TModuleAnalyticsProgress = {
+  workspaceSlug: string;
+  projectId: string;
+  moduleId: string;
+};
+
+const moduleBurnDownChartOptions = [
+  { value: "burndown", i18n_label: "issues" },
+  { value: "points", i18n_label: "points" },
+];
+
+export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((props) => {
+  // props
+  const { workspaceSlug, projectId, moduleId } = props;
+  // router
+  const searchParams = useSearchParams();
+  const peekModule = searchParams.get("peekModule") || undefined;
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
+  const { getPlotTypeByModuleId, setPlotType, getModuleById, fetchModuleDetails, fetchArchivedModuleDetails } =
+    useModule();
+  const { getFilter, updateFilterValueFromSidebar } = useWorkItemFilters();
+  // state
+  const [loader, setLoader] = useState(false);
+  // derived values
+  const moduleFilter = getFilter(EIssuesStoreType.MODULE, moduleId);
+  const selectedAssignees = moduleFilter?.findFirstConditionByPropertyAndOperator("assignee_id", "in");
+  const selectedLabels = moduleFilter?.findFirstConditionByPropertyAndOperator("label_id", "in");
+  const selectedStateGroups = moduleFilter?.findFirstConditionByPropertyAndOperator("state_group", "in");
+  const moduleDetails = getModuleById(moduleId);
+  const plotType: TModulePlotType = getPlotTypeByModuleId(moduleId);
+  const isCurrentProjectEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId) ? true : false;
+  const estimateDetails =
+    isCurrentProjectEstimateEnabled && currentActiveEstimateId && estimateById(currentActiveEstimateId);
+  const isCurrentEstimateTypeIsPoints = estimateDetails && estimateDetails?.type === EEstimateSystem.POINTS;
+  const completedIssues = moduleDetails?.completed_issues || 0;
+  const totalIssues = moduleDetails?.total_issues || 0;
+  const completedEstimatePoints = moduleDetails?.completed_estimate_points || 0;
+  const totalEstimatePoints = moduleDetails?.total_estimate_points || 0;
+  const progressHeaderPercentage = moduleDetails
+    ? plotType === "points"
+      ? completedEstimatePoints != 0 && totalEstimatePoints != 0
+        ? Math.round((completedEstimatePoints / totalEstimatePoints) * 100)
+        : 0
+      : completedIssues != 0 && completedIssues != 0
+        ? Math.round((completedIssues / totalIssues) * 100)
+        : 0
+    : 0;
+  const chartDistributionData =
+    plotType === "points" ? moduleDetails?.estimate_distribution : moduleDetails?.distribution || undefined;
+  const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
+  const groupedIssues = useMemo(
+    () => ({
+      backlog: plotType === "points" ? moduleDetails?.backlog_estimate_points || 0 : moduleDetails?.backlog_issues || 0,
+      unstarted:
+        plotType === "points" ? moduleDetails?.unstarted_estimate_points || 0 : moduleDetails?.unstarted_issues || 0,
+      started: plotType === "points" ? moduleDetails?.started_estimate_points || 0 : moduleDetails?.started_issues || 0,
+      completed:
+        plotType === "points" ? moduleDetails?.completed_estimate_points || 0 : moduleDetails?.completed_issues || 0,
+      cancelled:
+        plotType === "points" ? moduleDetails?.cancelled_estimate_points || 0 : moduleDetails?.cancelled_issues || 0,
+    }),
+    [plotType, moduleDetails]
+  );
+  const moduleStartDate = getDate(moduleDetails?.start_date);
+  const moduleEndDate = getDate(moduleDetails?.target_date);
+  const isModuleStartDateValid = moduleStartDate && moduleStartDate <= new Date();
+  const isModuleEndDateValid = moduleStartDate && moduleEndDate && moduleEndDate >= moduleStartDate;
+  const isModuleDateValid = isModuleStartDateValid && isModuleEndDateValid;
+  const isArchived = !!moduleDetails?.archived_at;
+
+  // handlers
+  const onChange = async (value: TModulePlotType) => {
+    setPlotType(moduleId, value);
+    if (!workspaceSlug || !projectId || !moduleId) return;
+    try {
+      setLoader(true);
+      if (isArchived) {
+        await fetchArchivedModuleDetails(workspaceSlug, projectId, moduleId);
+      } else {
+        await fetchModuleDetails(workspaceSlug, projectId, moduleId);
+      }
+      setLoader(false);
+    } catch (error) {
+      setLoader(false);
+      setPlotType(moduleId, plotType);
+    }
+  };
+
+  if (!moduleDetails) return <></>;
+  return (
+    <div className="border-t border-custom-border-200 space-y-4 py-4 px-3">
+      <Disclosure defaultOpen={isModuleDateValid ? true : false}>
+        {({ open }) => (
+          <div className="space-y-6">
+            {/* progress bar header */}
+            {isModuleDateValid ? (
+              <div className="relative w-full flex justify-between items-center gap-2">
+                <Disclosure.Button className="relative flex items-center gap-2 w-full">
+                  <div className="font-medium text-custom-text-200 text-sm">{t("progress")}</div>
+                  {progressHeaderPercentage > 0 && (
+                    <div className="flex h-5 w-9 items-center justify-center rounded bg-amber-500/20 text-xs font-medium text-amber-500">{`${progressHeaderPercentage}%`}</div>
+                  )}
+                </Disclosure.Button>
+                {isCurrentEstimateTypeIsPoints && (
+                  <>
+                    <div>
+                      <CustomSelect
+                        value={plotType}
+                        label={
+                          <span>
+                            {t(moduleBurnDownChartOptions.find((v) => v.value === plotType)?.i18n_label || "none")}
+                          </span>
+                        }
+                        onChange={onChange}
+                        maxHeight="lg"
+                      >
+                        {moduleBurnDownChartOptions.map((item) => (
+                          <CustomSelect.Option key={item.value} value={item.value}>
+                            {t(item.i18n_label)}
+                          </CustomSelect.Option>
+                        ))}
+                      </CustomSelect>
+                    </div>
+                    {loader && <Spinner className="h-3 w-3" />}
+                  </>
+                )}
+                <Disclosure.Button className="ml-auto">
+                  {open ? (
+                    <ChevronUp className="h-3.5 w-3.5" aria-hidden="true" />
+                  ) : (
+                    <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+            ) : (
+              <div className="relative w-full flex justify-between items-center gap-2">
+                <div className="font-medium text-custom-text-200 text-sm">Progress</div>
+                <div className="flex items-center gap-1">
+                  <AlertCircle height={14} width={14} className="text-custom-text-200" />
+                  <span className="text-xs italic text-custom-text-200">
+                    {moduleDetails?.start_date && moduleDetails?.target_date
+                      ? t("project_module.empty_state.sidebar.in_active")
+                      : t("project_module.empty_state.sidebar.invalid_date")}
+                  </span>
+                </div>
+              </div>
+            )}
+
+            <Transition show={open}>
+              <Disclosure.Panel className="space-y-4">
+                {/* progress burndown chart */}
+                <div>
+                  {moduleStartDate && moduleEndDate && completionChartDistributionData && (
+                    <Fragment>
+                      {plotType === "points" ? (
+                        <ProgressChart
+                          distribution={completionChartDistributionData}
+                          totalIssues={totalEstimatePoints}
+                          plotTitle={"points"}
+                        />
+                      ) : (
+                        <ProgressChart
+                          distribution={completionChartDistributionData}
+                          totalIssues={totalIssues}
+                          plotTitle={"work items"}
+                        />
+                      )}
+                    </Fragment>
+                  )}
+                </div>
+
+                {/* progress detailed view */}
+                {chartDistributionData && (
+                  <div className="w-full border-t border-custom-border-200 pt-5">
+                    <ModuleProgressStats
+                      distribution={chartDistributionData}
+                      groupedIssues={groupedIssues}
+                      handleFiltersUpdate={updateFilterValueFromSidebar.bind(
+                        updateFilterValueFromSidebar,
+                        EIssuesStoreType.MODULE,
+                        moduleId
+                      )}
+                      isEditable={Boolean(!peekModule) && moduleFilter !== undefined}
+                      moduleId={moduleId}
+                      noBackground={false}
+                      plotType={plotType}
+                      roundedTab={false}
+                      selectedFilters={{
+                        assignees: selectedAssignees,
+                        labels: selectedLabels,
+                        stateGroups: selectedStateGroups,
+                      }}
+                      size="xs"
+                      totalIssuesCount={plotType === "points" ? totalEstimatePoints || 0 : totalIssues || 0}
+                    />
+                  </div>
+                )}
+              </Disclosure.Panel>
+            </Transition>
+          </div>
+        )}
+      </Disclosure>
+    </div>
+  );
+});

apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { Tab } from "@headlessui/react";
+import { useTranslation } from "@plane/i18n";
+import type { TWorkItemFilterCondition } from "@plane/shared-state";
+import type { TModuleDistribution, TModuleEstimateDistribution, TModulePlotType } from "@plane/types";
+import { cn, toFilterArray } from "@plane/utils";
+// components
+import type { TAssigneeData } from "@/components/core/sidebar/progress-stats/assignee";
+import { AssigneeStatComponent } from "@/components/core/sidebar/progress-stats/assignee";
+import type { TLabelData } from "@/components/core/sidebar/progress-stats/label";
+import { LabelStatComponent } from "@/components/core/sidebar/progress-stats/label";
+import type { TSelectedFilterProgressStats } from "@/components/core/sidebar/progress-stats/shared";
+import { createFilterUpdateHandler, PROGRESS_STATS } from "@/components/core/sidebar/progress-stats/shared";
+import type { TStateGroupData } from "@/components/core/sidebar/progress-stats/state_group";
+import { StateGroupStatComponent } from "@/components/core/sidebar/progress-stats/state_group";
+// hooks
+import useLocalStorage from "@/hooks/use-local-storage";
+
+type TModuleProgressStats = {
+  distribution: TModuleDistribution | TModuleEstimateDistribution | undefined;
+  groupedIssues: Record<string, number>;
+  handleFiltersUpdate: (condition: TWorkItemFilterCondition) => void;
+  isEditable?: boolean;
+  moduleId: string;
+  noBackground?: boolean;
+  plotType: TModulePlotType;
+  roundedTab?: boolean;
+  selectedFilters: TSelectedFilterProgressStats;
+  size?: "xs" | "sm";
+  totalIssuesCount: number;
+};
+
+export const ModuleProgressStats: FC<TModuleProgressStats> = observer((props) => {
+  const {
+    distribution,
+    groupedIssues,
+    handleFiltersUpdate,
+    isEditable = false,
+    moduleId,
+    noBackground = false,
+    plotType,
+    roundedTab = false,
+    selectedFilters,
+    size = "sm",
+    totalIssuesCount,
+  } = props;
+  // plane imports
+  const { t } = useTranslation();
+  // hooks
+  const { storedValue: currentTab, setValue: setModuleTab } = useLocalStorage(
+    `module-analytics-tab-${moduleId}`,
+    "stat-assignees"
+  );
+  // derived values
+  const currentTabIndex = (tab: string): number => PROGRESS_STATS.findIndex((stat) => stat.key === tab);
+  const currentDistribution = distribution as TModuleDistribution;
+  const currentEstimateDistribution = distribution as TModuleEstimateDistribution;
+  const selectedAssigneeIds = toFilterArray(selectedFilters?.assignees?.value || []) as string[];
+  const selectedLabelIds = toFilterArray(selectedFilters?.labels?.value || []) as string[];
+  const selectedStateGroups = toFilterArray(selectedFilters?.stateGroups?.value || []) as string[];
+
+  const distributionAssigneeData: TAssigneeData =
+    plotType === "burndown"
+      ? (currentDistribution?.assignees || []).map((assignee) => ({
+          id: assignee?.assignee_id || undefined,
+          title: assignee?.display_name || undefined,
+          avatar_url: assignee?.avatar_url || undefined,
+          completed: assignee.completed_issues,
+          total: assignee.total_issues,
+        }))
+      : (currentEstimateDistribution?.assignees || []).map((assignee) => ({
+          id: assignee?.assignee_id || undefined,
+          title: assignee?.display_name || undefined,
+          avatar_url: assignee?.avatar_url || undefined,
+          completed: assignee.completed_estimates,
+          total: assignee.total_estimates,
+        }));
+
+  const distributionLabelData: TLabelData =
+    plotType === "burndown"
+      ? (currentDistribution?.labels || []).map((label) => ({
+          id: label?.label_id || undefined,
+          title: label?.label_name || undefined,
+          color: label?.color || undefined,
+          completed: label.completed_issues,
+          total: label.total_issues,
+        }))
+      : (currentEstimateDistribution?.labels || []).map((label) => ({
+          id: label?.label_id || undefined,
+          title: label?.label_name || undefined,
+          color: label?.color || undefined,
+          completed: label.completed_estimates,
+          total: label.total_estimates,
+        }));
+
+  const distributionStateData: TStateGroupData = Object.keys(groupedIssues || {}).map((state) => ({
+    state: state,
+    completed: groupedIssues?.[state] || 0,
+    total: totalIssuesCount || 0,
+  }));
+
+  const handleAssigneeFiltersUpdate = createFilterUpdateHandler(
+    "assignee_id",
+    selectedAssigneeIds,
+    handleFiltersUpdate
+  );
+  const handleLabelFiltersUpdate = createFilterUpdateHandler("label_id", selectedLabelIds, handleFiltersUpdate);
+  const handleStateGroupFiltersUpdate = createFilterUpdateHandler(
+    "state_group",
+    selectedStateGroups,
+    handleFiltersUpdate
+  );
+
+  return (
+    <div>
+      <Tab.Group defaultIndex={currentTabIndex(currentTab ? currentTab : "stat-assignees")}>
+        <Tab.List
+          as="div"
+          className={cn(
+            `flex w-full items-center justify-between gap-2 rounded-md p-1`,
+            roundedTab ? `rounded-3xl` : `rounded-md`,
+            noBackground ? `` : `bg-custom-background-90`,
+            size === "xs" ? `text-xs` : `text-sm`
+          )}
+        >
+          {PROGRESS_STATS.map((stat) => (
+            <Tab
+              className={cn(
+                `p-1 w-full text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all`,
+                roundedTab ? `rounded-3xl border border-custom-border-200` : `rounded`,
+                stat.key === currentTab
+                  ? "bg-custom-background-100 text-custom-text-300"
+                  : "text-custom-text-400 hover:text-custom-text-300"
+              )}
+              key={stat.key}
+              onClick={() => setModuleTab(stat.key)}
+            >
+              {t(stat.i18n_title)}
+            </Tab>
+          ))}
+        </Tab.List>
+        <Tab.Panels className="py-3 text-custom-text-200">
+          <Tab.Panel key={"stat-assignees"}>
+            <AssigneeStatComponent
+              distribution={distributionAssigneeData}
+              handleAssigneeFiltersUpdate={handleAssigneeFiltersUpdate}
+              isEditable={isEditable}
+              selectedAssigneeIds={selectedAssigneeIds}
+            />
+          </Tab.Panel>
+          <Tab.Panel key={"stat-labels"}>
+            <LabelStatComponent
+              distribution={distributionLabelData}
+              handleLabelFiltersUpdate={handleLabelFiltersUpdate}
+              isEditable={isEditable}
+              selectedLabelIds={selectedLabelIds}
+            />
+          </Tab.Panel>
+          <Tab.Panel key={"stat-states"}>
+            <StateGroupStatComponent
+              distribution={distributionStateData}
+              handleStateGroupFiltersUpdate={handleStateGroupFiltersUpdate}
+              isEditable={isEditable}
+              selectedStateGroups={selectedStateGroups}
+              totalIssuesCount={totalIssuesCount}
+            />
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+});

apps/web/core/components/modules/analytics-sidebar/root.tsx

@@ -0,0 +1,502 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+import { CalendarClock, ChevronDown, ChevronRight, Info, Plus, SquareUser, Users } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
+import {
+  MODULE_STATUS,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  EEstimateSystem,
+  MODULE_TRACKER_EVENTS,
+  MODULE_TRACKER_ELEMENTS,
+} from "@plane/constants";
+// plane types
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
+// plane ui
+import { Loader, CustomSelect, TextArea } from "@plane/ui";
+// components
+// helpers
+import { getDate, renderFormattedPayloadDate } from "@plane/utils";
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { CreateUpdateModuleLinkModal, ModuleAnalyticsProgress, ModuleLinksList } from "@/components/modules";
+import { captureElementAndEvent, captureSuccess, captureError } from "@/helpers/event-tracker.helper";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useModule } from "@/hooks/store/use-module";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web constants
+const defaultValues: Partial<IModule> = {
+  lead_id: "",
+  member_ids: [],
+  start_date: null,
+  target_date: null,
+  status: "backlog",
+};
+
+type Props = {
+  moduleId: string;
+  handleClose: () => void;
+  isArchived?: boolean;
+};
+
+// TODO: refactor this component
+export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
+  const { moduleId, handleClose, isArchived } = props;
+  // states
+  const [moduleLinkModal, setModuleLinkModal] = useState(false);
+  const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
+  // router
+  const { workspaceSlug, projectId } = useParams();
+
+  // store hooks
+  const { t } = useTranslation();
+  const { allowPermissions } = useUserPermissions();
+
+  const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
+  const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
+
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  const areEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId.toString());
+  const estimateType = areEstimateEnabled && currentActiveEstimateId && estimateById(currentActiveEstimateId);
+  const isEstimatePointValid = estimateType && estimateType?.type == EEstimateSystem.POINTS ? true : false;
+
+  const { reset, control } = useForm({
+    defaultValues,
+  });
+
+  const submitChanges = (data: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+    updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), data)
+      .then((res) => {
+        captureElementAndEvent({
+          element: {
+            elementName: MODULE_TRACKER_ELEMENTS.RIGHT_SIDEBAR,
+          },
+          event: {
+            eventName: MODULE_TRACKER_EVENTS.update,
+            payload: { id: res.id },
+            state: "SUCCESS",
+          },
+        });
+      })
+      .catch((error) => {
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.update,
+          payload: { id: moduleId },
+          error,
+        });
+      });
+  };
+
+  const handleCreateLink = async (formData: ModuleLink) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    await createModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), payload)
+      .then(() =>
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.link.create,
+          payload: { id: moduleId },
+        })
+      )
+      .catch((error) => {
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.link.create,
+          payload: { id: moduleId },
+          error,
+        });
+      });
+  };
+
+  const handleUpdateLink = async (formData: ModuleLink, linkId: string) => {
+    if (!workspaceSlug || !projectId || !module) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    await updateModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId, payload)
+      .then(() =>
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.link.update,
+          payload: { id: moduleId },
+        })
+      )
+      .catch((error) => {
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.link.update,
+          payload: { id: moduleId },
+          error,
+        });
+      });
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId || !module) return;
+
+    deleteModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId)
+      .then(() => {
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.link.delete,
+          payload: { id: moduleId },
+        });
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module link deleted successfully.",
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Some error occurred",
+        });
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.link.delete,
+          payload: { id: moduleId },
+        });
+      });
+  };
+
+  const handleDateChange = async (startDate: Date | undefined, targetDate: Date | undefined) => {
+    submitChanges({
+      start_date: startDate ? renderFormattedPayloadDate(startDate) : null,
+      target_date: targetDate ? renderFormattedPayloadDate(targetDate) : null,
+    });
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
+      title: "Success!",
+      message: "Module updated successfully.",
+    });
+  };
+
+  useEffect(() => {
+    if (moduleDetails)
+      reset({
+        ...moduleDetails,
+      });
+  }, [moduleDetails, reset]);
+
+  const handleEditLink = (link: ILinkDetails) => {
+    setSelectedLinkToUpdate(link);
+    setModuleLinkModal(true);
+  };
+
+  if (!moduleDetails)
+    return (
+      <Loader>
+        <div className="space-y-2">
+          <Loader.Item height="15px" width="50%" />
+          <Loader.Item height="15px" width="30%" />
+        </div>
+        <div className="mt-8 space-y-3">
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+        </div>
+      </Loader>
+    );
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  const issueCount =
+    moduleDetails.total_issues === 0
+      ? "0 work items"
+      : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
+
+  const issueEstimatePointCount =
+    moduleDetails.total_estimate_points === 0
+      ? "0 work items"
+      : `${moduleDetails.completed_estimate_points}/${moduleDetails.total_estimate_points}`;
+
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <div className="relative">
+      <CreateUpdateModuleLinkModal
+        isOpen={moduleLinkModal}
+        handleClose={() => {
+          setModuleLinkModal(false);
+          setTimeout(() => {
+            setSelectedLinkToUpdate(null);
+          }, 500);
+        }}
+        data={selectedLinkToUpdate}
+        createLink={handleCreateLink}
+        updateLink={handleUpdateLink}
+      />
+      <>
+        <div
+          className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}
+        >
+          <div>
+            <button
+              className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
+              onClick={() => handleClose()}
+            >
+              <ChevronRight className="h-3 w-3 stroke-2 text-white" />
+            </button>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-5 pt-2">
+            <Controller
+              control={control}
+              name="status"
+              render={({ field: { value } }) => (
+                <CustomSelect
+                  customButton={
+                    <span
+                      className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
+                        isEditingAllowed && !isArchived ? "cursor-pointer" : "cursor-not-allowed"
+                      }`}
+                      style={{
+                        color: moduleStatus ? moduleStatus.color : "#a3a3a2",
+                        backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
+                      }}
+                    >
+                      {(moduleStatus && t(moduleStatus?.i18n_label)) ?? t("project_modules.status.backlog")}
+                    </span>
+                  }
+                  value={value}
+                  onChange={(value: any) => {
+                    submitChanges({ status: value });
+                  }}
+                  disabled={!isEditingAllowed || isArchived}
+                >
+                  {MODULE_STATUS.map((status) => (
+                    <CustomSelect.Option key={status.value} value={status.value}>
+                      <div className="flex items-center gap-2">
+                        <ModuleStatusIcon status={status.value} />
+                        {t(status.i18n_label)}
+                      </div>
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+          </div>
+          <h4 className="w-full break-words text-xl font-semibold text-custom-text-100">{moduleDetails.name}</h4>
+        </div>
+
+        {moduleDetails.description && (
+          <TextArea
+            className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-sm leading-5 text-custom-text-200"
+            value={moduleDetails.description}
+            disabled
+          />
+        )}
+
+        <div className="flex flex-col gap-5 pb-6 pt-2.5">
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+              <CalendarClock className="h-4 w-4" />
+              <span className="text-base">{t("date_range")}</span>
+            </div>
+            <div className="h-7">
+              <Controller
+                control={control}
+                name="start_date"
+                render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
+                  <Controller
+                    control={control}
+                    name="target_date"
+                    render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => {
+                      const startDate = getDate(startDateValue);
+                      const endDate = getDate(endDateValue);
+                      return (
+                        <DateRangeDropdown
+                          buttonContainerClassName="w-full"
+                          buttonVariant="background-with-text"
+                          value={{
+                            from: startDate,
+                            to: endDate,
+                          }}
+                          onSelect={(val) => {
+                            onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
+                            onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
+                            handleDateChange(val?.from, val?.to);
+                          }}
+                          placeholder={{
+                            from: t("start_date"),
+                            to: t("end_date"),
+                          }}
+                          disabled={!isEditingAllowed || isArchived}
+                        />
+                      );
+                    }}
+                  />
+                )}
+              />
+            </div>
+          </div>
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+              <SquareUser className="h-4 w-4" />
+              <span className="text-base">{t("lead")}</span>
+            </div>
+            <Controller
+              control={control}
+              name="lead_id"
+              render={({ field: { value } }) => (
+                <div className="h-7 w-3/5">
+                  <MemberDropdown
+                    value={value ?? null}
+                    onChange={(val) => {
+                      submitChanges({ lead_id: val });
+                    }}
+                    projectId={projectId?.toString() ?? ""}
+                    multiple={false}
+                    buttonVariant="background-with-text"
+                    placeholder={t("lead")}
+                    disabled={!isEditingAllowed || isArchived}
+                    icon={SquareUser}
+                  />
+                </div>
+              )}
+            />
+          </div>
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+              <Users className="h-4 w-4" />
+              <span className="text-base">{t("members")}</span>
+            </div>
+            <Controller
+              control={control}
+              name="member_ids"
+              render={({ field: { value } }) => (
+                <div className="h-7 w-3/5">
+                  <MemberDropdown
+                    value={value ?? []}
+                    onChange={(val: string[]) => {
+                      submitChanges({ member_ids: val });
+                    }}
+                    multiple
+                    projectId={projectId?.toString() ?? ""}
+                    buttonVariant={value && value?.length > 0 ? "transparent-without-text" : "background-with-text"}
+                    buttonClassName={value && value.length > 0 ? "hover:bg-transparent px-0" : ""}
+                    disabled={!isEditingAllowed || isArchived}
+                  />
+                </div>
+              )}
+            />
+          </div>
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+              <WorkItemsIcon className="h-4 w-4" />
+              <span className="text-base">{t("issues")}</span>
+            </div>
+            <div className="flex h-7 w-3/5 items-center">
+              <span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
+            </div>
+          </div>
+
+          {/**
+           * NOTE: Render this section when estimate points of he projects is enabled and the estimate system is points
+           */}
+          {isEstimatePointValid && (
+            <div className="flex items-center justify-start gap-1">
+              <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
+                <WorkItemsIcon className="h-4 w-4" />
+                <span className="text-base">{t("points")}</span>
+              </div>
+              <div className="flex h-7 w-3/5 items-center">
+                <span className="px-1.5 text-sm text-custom-text-300">{issueEstimatePointCount}</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {workspaceSlug && projectId && moduleDetails?.id && (
+          <ModuleAnalyticsProgress
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            moduleId={moduleDetails?.id}
+          />
+        )}
+
+        <div className="flex flex-col">
+          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 px-1.5 py-5">
+            {/* Accessing link outside the disclosure as mobx is not  considering the children inside Disclosure as part of the component hence not observing their state change*/}
+            <Disclosure defaultOpen={!!moduleDetails?.link_module?.length}>
+              {({ open }) => (
+                <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                  <Disclosure.Button className="flex w-full items-center justify-between gap-2 p-1.5">
+                    <div className="flex items-center justify-start gap-2 text-sm">
+                      <span className="font-medium text-custom-text-200">{t("common.links")}</span>
+                    </div>
+
+                    <div className="flex items-center gap-2.5">
+                      <ChevronDown className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                    </div>
+                  </Disclosure.Button>
+                  <Transition show={open}>
+                    <Disclosure.Panel>
+                      <div className="mt-2 flex min-h-72 w-full flex-col space-y-3 overflow-y-auto">
+                        {isEditingAllowed && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
+                          <>
+                            {isEditingAllowed && !isArchived && (
+                              <div className="flex w-full items-center justify-end">
+                                <button
+                                  className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                  onClick={() => setModuleLinkModal(true)}
+                                >
+                                  <Plus className="h-3 w-3" />
+                                  {t("add_link")}
+                                </button>
+                              </div>
+                            )}
+
+                            {moduleId && (
+                              <ModuleLinksList
+                                moduleId={moduleId}
+                                handleEditLink={handleEditLink}
+                                handleDeleteLink={handleDeleteLink}
+                                disabled={!isEditingAllowed || isArchived}
+                              />
+                            )}
+                          </>
+                        ) : (
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                              <Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
+                              <span className="p-0.5 text-xs text-custom-text-300">
+                                {t("common.no_links_added_yet")}
+                              </span>
+                            </div>
+                            {isEditingAllowed && !isArchived && (
+                              <button
+                                className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                onClick={() => setModuleLinkModal(true)}
+                              >
+                                <Plus className="h-3 w-3" />
+                                {t("add_link")}
+                              </button>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </Disclosure.Panel>
+                  </Transition>
+                </div>
+              )}
+            </Disclosure>
+          </div>
+        </div>
+      </>
+    </div>
+  );
+});

apps/web/core/components/modules/applied-filters/date.tsx

@@ -0,0 +1,55 @@
+import { observer } from "mobx-react";
+// icons
+import { X } from "lucide-react";
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
+// helpers
+// constants
+
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+  const { editable, handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_AFTER_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          {editable && (
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(date)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      ))}
+    </>
+  );
+});

apps/web/core/components/modules/applied-filters/index.ts

@@ -0,0 +1,4 @@
+export * from "./date";
+export * from "./members";
+export * from "./root";
+export * from "./status";

apps/web/core/components/modules/applied-filters/members.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { X } from "lucide-react";
+// plane ui
+import { Avatar } from "@plane/ui";
+// helpers
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const {
+    workspace: { getWorkspaceMemberDetails },
+  } = useMember();
+
+  return (
+    <>
+      {values.map((memberId) => {
+        const memberDetails = getWorkspaceMemberDetails(memberId)?.member;
+
+        if (!memberDetails) return null;
+
+        return (
+          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <Avatar
+              name={memberDetails.display_name}
+              src={getFileURL(memberDetails.avatar_url)}
+              showTooltip={false}
+              size={"sm"}
+            />
+            <span className="normal-case">{memberDetails.display_name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(memberId)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});

apps/web/core/components/modules/applied-filters/root.tsx

@@ -0,0 +1,126 @@
+import { X } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
+// components
+import { Header, EHeaderVariant, Tag } from "@plane/ui";
+import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
+import { AppliedDateFilters, AppliedMembersFilters, AppliedStatusFilters } from "@/components/modules";
+// helpers
+// types
+
+type Props = {
+  appliedFilters: TModuleFilters;
+  isFavoriteFilterApplied?: boolean;
+  handleClearAllFilters: () => void;
+  handleDisplayFiltersUpdate?: (updatedDisplayProperties: Partial<TModuleDisplayFilters>) => void;
+  handleRemoveFilter: (key: keyof TModuleFilters, value: string | null) => void;
+  alwaysAllowEditing?: boolean;
+  isArchived?: boolean;
+};
+
+const MEMBERS_FILTERS = ["lead", "members"];
+const DATE_FILTERS = ["start_date", "target_date"];
+
+export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
+  const {
+    appliedFilters,
+    isFavoriteFilterApplied,
+    handleClearAllFilters,
+    handleRemoveFilter,
+    handleDisplayFiltersUpdate,
+    alwaysAllowEditing,
+    isArchived = false,
+  } = props;
+  const { t } = useTranslation();
+
+  if (!appliedFilters && !isFavoriteFilterApplied) return null;
+  if (Object.keys(appliedFilters).length === 0 && !isFavoriteFilterApplied) return null;
+
+  const isEditingAllowed = alwaysAllowEditing;
+
+  return (
+    <Header variant={EHeaderVariant.TERNARY}>
+      <div className="flex gap-2 flex-wrap">
+        {Object.entries(appliedFilters).map(([key, value]) => {
+          const filterKey = key as keyof TModuleFilters;
+
+          if (!value) return;
+          if (Array.isArray(value) && value.length === 0) return;
+
+          return (
+            <Tag key={filterKey}>
+              <div className="flex flex-wrap items-center gap-1.5">
+                <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+                {filterKey === "status" && (
+                  <AppliedStatusFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter("status", val)}
+                    values={value}
+                  />
+                )}
+                {DATE_FILTERS.includes(filterKey) && (
+                  <AppliedDateFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                    values={value}
+                  />
+                )}
+                {MEMBERS_FILTERS.includes(filterKey) && (
+                  <AppliedMembersFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                    values={value}
+                  />
+                )}
+                {isEditingAllowed && (
+                  <button
+                    type="button"
+                    className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                    onClick={() => handleRemoveFilter(filterKey, null)}
+                  >
+                    <X size={12} strokeWidth={2} />
+                  </button>
+                )}
+              </div>
+            </Tag>
+          );
+        })}
+        {!isArchived && isFavoriteFilterApplied && (
+          <div
+            key="module_display_filters"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+          >
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-xs text-custom-text-300">Modules</span>
+              <div className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
+                Favorite
+                {isEditingAllowed && (
+                  <button
+                    type="button"
+                    className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                    onClick={() =>
+                      handleDisplayFiltersUpdate &&
+                      handleDisplayFiltersUpdate({
+                        favorites: !isFavoriteFilterApplied,
+                      })
+                    }
+                  >
+                    <X size={10} strokeWidth={2} />
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+        {isEditingAllowed && (
+          <button type="button" onClick={handleClearAllFilters}>
+            <Tag>
+              {t("common.clear_all")}
+              <X size={12} strokeWidth={2} />
+            </Tag>
+          </button>
+        )}
+      </div>
+    </Header>
+  );
+};

apps/web/core/components/modules/applied-filters/status.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { X } from "lucide-react";
+// ui
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+// constants
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {values.map((status) => {
+        const statusDetails = MODULE_STATUS?.find((s) => s.value === status);
+        if (!statusDetails) return null;
+
+        return (
+          <div key={status} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <ModuleStatusIcon status={statusDetails.value} height="12px" width="12px" />
+            {t(statusDetails.i18n_label)}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(status)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});

apps/web/core/components/modules/archived-modules/header.tsx

@@ -0,0 +1,156 @@
+import type { FC } from "react";
+import { useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { ListFilter, Search, X } from "lucide-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import type { TModuleFilters } from "@plane/types";
+import { cn, calculateTotalFilters } from "@plane/utils";
+// components
+import { ArchiveTabsList } from "@/components/archives";
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+
+export const ArchivedModulesHeader: FC = observer(() => {
+  // router
+  const { projectId } = useParams();
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // hooks
+  const {
+    currentProjectArchivedFilters,
+    currentProjectDisplayFilters,
+    archivedModulesSearchQuery,
+    updateFilters,
+    updateDisplayFilters,
+    updateArchivedModulesSearchQuery,
+  } = useModuleFilter();
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(archivedModulesSearchQuery !== "" ? true : false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && archivedModulesSearchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleFilters = useCallback(
+    (key: keyof TModuleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (archivedModulesSearchQuery && archivedModulesSearchQuery.trim() !== "") updateArchivedModulesSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  const isFiltersApplied = calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0;
+
+  return (
+    <div className="group relative flex border-b border-custom-border-200">
+      <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
+        <ArchiveTabsList />
+      </div>
+      {/* filter options */}
+      <div className="h-full flex items-center gap-3 self-end px-8">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+          >
+            <Search className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div
+          className={cn(
+            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            {
+              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <Search className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            placeholder="Search"
+            value={archivedModulesSearchQuery}
+            onChange={(e) => updateArchivedModulesSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateArchivedModulesSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+        <ModuleOrderByDropdown
+          value={currentProjectDisplayFilters?.order_by}
+          onChange={(val) => {
+            if (!projectId || val === currentProjectDisplayFilters?.order_by) return;
+            updateDisplayFilters(projectId.toString(), {
+              order_by: val,
+            });
+          }}
+        />
+        <FiltersDropdown
+          icon={<ListFilter className="h-3 w-3" />}
+          title="Filters"
+          placement="bottom-end"
+          isFiltersApplied={isFiltersApplied}
+        >
+          <ModuleFiltersSelection
+            displayFilters={currentProjectDisplayFilters ?? {}}
+            filters={currentProjectArchivedFilters ?? {}}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!projectId) return;
+              updateDisplayFilters(projectId.toString(), val);
+            }}
+            handleFiltersUpdate={handleFilters}
+            memberIds={workspaceMemberIds ?? undefined}
+            isArchived
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});

apps/web/core/components/modules/archived-modules/index.ts

@@ -0,0 +1,4 @@
+export * from "./root";
+export * from "./view";
+export * from "./header";
+export * from "./modal";

apps/web/core/components/modules/archived-modules/modal.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useState, Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  moduleId: string;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSubmit?: () => Promise<void>;
+};
+
+export const ArchiveModuleModal: React.FC<Props> = (props) => {
+  const { workspaceSlug, projectId, moduleId, isOpen, handleClose } = props;
+  // router
+  const router = useAppRouter();
+  // states
+  const [isArchiving, setIsArchiving] = useState(false);
+  // store hooks
+  const { getModuleNameById, archiveModule } = useModule();
+
+  const moduleName = getModuleNameById(moduleId);
+
+  const onClose = () => {
+    setIsArchiving(false);
+    handleClose();
+  };
+
+  const handleArchiveModule = async () => {
+    setIsArchiving(true);
+    await archiveModule(workspaceSlug, projectId, moduleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Archive success",
+          message: "Your archives can be found in project archives.",
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/${projectId}/modules`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Module could not be archived. Please try again.",
+        })
+      )
+      .finally(() => setIsArchiving(false));
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="px-5 py-4">
+                  <h3 className="text-xl font-medium 2xl:text-2xl">Archive module {moduleName}</h3>
+                  <p className="mt-3 text-sm text-custom-text-200">
+                    Are you sure you want to archive the module? All your archives can be restored later.
+                  </p>
+                  <div className="mt-3 flex justify-end gap-2">
+                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button size="sm" tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
+                      {isArchiving ? "Archiving" : "Archive"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/web/core/components/modules/archived-modules/root.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TModuleFilters } from "@plane/types";
+// components
+import { calculateTotalFilters } from "@plane/utils";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { ArchivedModulesView, ModuleAppliedFiltersList } from "@/components/modules";
+import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+// helpers
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { fetchArchivedModules, projectArchivedModuleIds, loader } = useModule();
+  const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useModuleFilter();
+  // derived values
+  const totalArchivedModules = projectArchivedModuleIds?.length ?? 0;
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/archived/empty-modules" });
+
+  useSWR(
+    workspaceSlug && projectId ? `ARCHIVED_MODULES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await fetchArchivedModules(workspaceSlug.toString(), projectId.toString());
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TModuleFilters, value: string | null) => {
+      if (!projectId) return;
+      let newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  if (loader || !projectArchivedModuleIds) {
+    return <CycleModuleListLayoutLoader />;
+  }
+
+  return (
+    <>
+      {calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0 && (
+        <div className="border-b border-custom-border-200 px-5 py-3">
+          <ModuleAppliedFiltersList
+            appliedFilters={currentProjectArchivedFilters ?? {}}
+            handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
+            handleRemoveFilter={handleRemoveFilter}
+            alwaysAllowEditing
+            isArchived
+          />
+        </div>
+      )}
+      {totalArchivedModules === 0 ? (
+        <div className="h-full place-items-center">
+          <DetailedEmptyState
+            title={t("project_module.empty_state.archived.title")}
+            description={t("project_module.empty_state.archived.description")}
+            assetPath={resolvedPath}
+          />
+        </div>
+      ) : (
+        <div className="relative h-full w-full overflow-auto">
+          <ArchivedModulesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/archived-modules/view.tsx

@@ -0,0 +1,65 @@
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+// components
+import { ModuleListItem, ModulePeekOverview } from "@/components/modules";
+// ui
+import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+// assets
+import AllFiltersImage from "@/public/empty-state/module/all-filters.svg";
+import NameFilterImage from "@/public/empty-state/module/name-filter.svg";
+
+export interface IArchivedModulesView {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ArchivedModulesView: FC<IArchivedModulesView> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { getFilteredArchivedModuleIds, loader } = useModule();
+  const { archivedModulesSearchQuery } = useModuleFilter();
+  // derived values
+  const filteredArchivedModuleIds = getFilteredArchivedModuleIds(projectId);
+
+  if (loader || !filteredArchivedModuleIds) return <CycleModuleListLayoutLoader />;
+
+  if (filteredArchivedModuleIds.length === 0)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <div className="text-center">
+          <Image
+            src={archivedModulesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            alt="No matching modules"
+          />
+          <h5 className="text-xl font-medium mt-7 mb-1">No matching modules</h5>
+          <p className="text-custom-text-400 text-base">
+            {archivedModulesSearchQuery.trim() === ""
+              ? "Remove the filters to see all modules"
+              : "Remove the search criteria to see all modules"}
+          </p>
+        </div>
+      </div>
+    );
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="flex h-full w-full justify-between">
+        <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+          {filteredArchivedModuleIds.map((moduleId) => (
+            <ModuleListItem key={moduleId} moduleId={moduleId} />
+          ))}
+        </div>
+        <ModulePeekOverview
+          projectId={projectId?.toString() ?? ""}
+          workspaceSlug={workspaceSlug?.toString() ?? ""}
+          isArchived
+        />
+      </div>
+    </div>
+  );
+});

apps/web/core/components/modules/delete-module-modal.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import { MODULE_TRACKER_EVENTS, PROJECT_ERROR_MESSAGES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IModule } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// constants
+// helpers
+import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  data: IModule;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const DeleteModuleModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, onClose } = props;
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId, moduleId, peekModule } = useParams();
+  // store hooks
+  const { deleteModule } = useModule();
+  const { t } = useTranslation();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIsDeleteLoading(true);
+
+    await deleteModule(workspaceSlug.toString(), projectId.toString(), data.id)
+      .then(() => {
+        if (moduleId || peekModule) router.push(`/${workspaceSlug}/projects/${data.project_id}/modules`);
+        handleClose();
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module deleted successfully.",
+        });
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.delete,
+          payload: { id: data.id },
+        });
+      })
+      .catch((errors) => {
+        const isPermissionError = errors?.error === "You don't have the required permissions.";
+        const currentError = isPermissionError
+          ? PROJECT_ERROR_MESSAGES.permissionError
+          : PROJECT_ERROR_MESSAGES.moduleDeleteError;
+        setToast({
+          title: t(currentError.i18n_title),
+          type: TOAST_TYPE.ERROR,
+          message: currentError.i18n_message && t(currentError.i18n_message),
+        });
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.delete,
+          payload: { id: data.id },
+          error: errors,
+        });
+      })
+      .finally(() => handleClose());
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isSubmitting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete module"
+      content={
+        <>
+          Are you sure you want to delete module-{" "}
+          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the data related to
+          the module will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
+  );
+});

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

@@ -0,0 +1,6 @@
+export * from "./lead";
+export * from "./members";
+export * from "./root";
+export * from "./start-date";
+export * from "./status";
+export * from "./target-date";

apps/web/core/components/modules/dropdowns/filters/lead.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar, Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLead: React.FC<Props> = observer((props: Props) => {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Lead${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`lead-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          name={member.display_name}
+                          src={getFileURL(member.avatar_url)}
+                          showTooltip={false}
+                          size="md"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/dropdowns/filters/members.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar, Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMembers: React.FC<Props> = observer((props: Props) => {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Members${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`member-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          name={member.display_name}
+                          src={getFileURL(member.avatar_url)}
+                          showTooltip={false}
+                          size="md"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Search, X } from "lucide-react";
+// plane imports
+import type { TModuleStatus } from "@plane/propel/icons";
+import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
+// components
+import { FilterOption } from "@/components/issues/issue-layouts/filters";
+import { FilterLead, FilterMembers, FilterStartDate, FilterStatus, FilterTargetDate } from "@/components/modules";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  displayFilters: TModuleDisplayFilters;
+  filters: TModuleFilters;
+  handleDisplayFiltersUpdate: (updatedDisplayProperties: Partial<TModuleDisplayFilters>) => void;
+  handleFiltersUpdate: (key: keyof TModuleFilters, value: string | string[]) => void;
+  memberIds?: string[] | undefined;
+  isArchived?: boolean;
+};
+
+export const ModuleFiltersSelection: React.FC<Props> = observer((props) => {
+  const {
+    displayFilters,
+    filters,
+    handleDisplayFiltersUpdate,
+    handleFiltersUpdate,
+    memberIds,
+    isArchived = false,
+  } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+  // store
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-custom-background-100 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus={!isMobile}
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+        {!isArchived && (
+          <div className="py-2">
+            <FilterOption
+              isChecked={!!displayFilters.favorites}
+              onClick={() =>
+                handleDisplayFiltersUpdate({
+                  favorites: !displayFilters.favorites,
+                })
+              }
+              title="Favorites"
+            />
+          </div>
+        )}
+
+        {/* status */}
+        {!isArchived && (
+          <div className="py-2">
+            <FilterStatus
+              appliedFilters={(filters.status as TModuleStatus[]) ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("status", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* lead */}
+        <div className="py-2">
+          <FilterLead
+            appliedFilters={filters.lead ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("lead", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* members */}
+        <div className="py-2">
+          <FilterMembers
+            appliedFilters={filters.members ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("members", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* start date */}
+        <div className="py-2">
+          <FilterStartDate
+            appliedFilters={filters.start_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* target date */}
+        <div className="py-2">
+          <FilterTargetDate
+            appliedFilters={filters.target_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("target_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,78 @@
+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: React.FC<Props> = observer((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-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,53 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import type { TModuleStatus } from "@plane/types";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  appliedFilters: TModuleStatus[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStatus: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const { t } = useTranslation();
+
+  const filteredOptions = MODULE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  return (
+    <>
+      <FilterHeader
+        title={`Status${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)}
+                icon={<ModuleStatusIcon status={status.value} />}
+                title={t(status.i18n_label)}
+              />
+            ))
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/dropdowns/filters/target-date.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane 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 FilterTargetDate: React.FC<Props> = observer((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-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,2 @@
+export * from "./filters";
+export * from "./order-by";

apps/web/core/components/modules/dropdowns/order-by.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
+import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { getButtonStyling } from "@plane/propel/button";
+import type { TModuleOrderByOptions } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// types
+// constants
+
+type Props = {
+  onChange: (value: TModuleOrderByOptions) => void;
+  value: TModuleOrderByOptions | undefined;
+};
+
+export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
+  const { onChange, value } = props;
+  // hooks
+  const { t } = useTranslation();
+
+  const orderByDetails = MODULE_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
+
+  const isDescending = value?.[0] === "-";
+  const isManual = value?.includes("sort_order");
+
+  return (
+    <CustomMenu
+      customButton={
+        <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
+          {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
+          {orderByDetails && t(orderByDetails?.i18n_label)}
+          <ChevronDown className="size-3" strokeWidth={2} />
+        </div>
+      }
+      placement="bottom-end"
+      maxHeight="lg"
+      closeOnSelect
+    >
+      {MODULE_ORDER_BY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => {
+            if (isDescending && !isManual) onChange(`-${option.key}` as TModuleOrderByOptions);
+            else onChange(option.key);
+          }}
+        >
+          {t(option.i18n_label)}
+          {value?.includes(option.key) && <Check className="h-3 w-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+      {!isManual && (
+        <>
+          <hr className="my-2 border-custom-border-200" />
+          <CustomMenu.MenuItem
+            className="flex items-center justify-between gap-2"
+            onClick={() => {
+              if (isDescending) onChange(value.slice(1) as TModuleOrderByOptions);
+            }}
+          >
+            Ascending
+            {!isDescending && <Check className="h-3 w-3" />}
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem
+            className="flex items-center justify-between gap-2"
+            onClick={() => {
+              if (!isDescending) onChange(`-${value}` as TModuleOrderByOptions);
+            }}
+          >
+            Descending
+            {isDescending && <Check className="h-3 w-3" />}
+          </CustomMenu.MenuItem>
+        </>
+      )}
+    </CustomMenu>
+  );
+};

apps/web/core/components/modules/form.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IModule } from "@plane/types";
+// ui
+import { Input, TextArea } from "@plane/ui";
+import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
+// components
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { ProjectDropdown } from "@/components/dropdowns/project/dropdown";
+import { ModuleStatusSelect } from "@/components/modules";
+// hooks
+import { useUser } from "@/hooks/store/user/user-user";
+
+type Props = {
+  handleFormSubmit: (values: Partial<IModule>, dirtyFields: any) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
+  data?: IModule;
+  isMobile?: boolean;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: "backlog",
+  lead_id: null,
+  member_ids: [],
+};
+
+export const ModuleForm: React.FC<Props> = (props) => {
+  const { handleFormSubmit, handleClose, status, projectId, setActiveProject, data, isMobile = false } = props;
+  // store hooks
+  const { projectsWithCreatePermissions } = useUser();
+  // form info
+  const {
+    formState: { errors, isSubmitting, dirtyFields },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<IModule>({
+    defaultValues: {
+      project_id: projectId,
+      name: data?.name || "",
+      description: data?.description || "",
+      status: data?.status || "backlog",
+      lead_id: data?.lead_id || null,
+      member_ids: data?.member_ids || [],
+    },
+  });
+
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_MODULE, isMobile);
+
+  const { t } = useTranslation();
+
+  const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
+    await handleFormSubmit(formData, dirtyFields);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
+      <div className="space-y-5 p-5">
+        <div className="flex items-center gap-x-3">
+          {!status && (
+            <Controller
+              control={control}
+              name="project_id"
+              render={({ field: { value, onChange } }) => (
+                <div className="h-7">
+                  <ProjectDropdown
+                    value={value}
+                    onChange={(val) => {
+                      if (!Array.isArray(val)) {
+                        onChange(val);
+                        setActiveProject(val);
+                      }
+                    }}
+                    multiple={false}
+                    buttonVariant="border-with-text"
+                    renderCondition={(projectId) => !!projectsWithCreatePermissions?.[projectId]}
+                    tabIndex={getIndex("cover_image")}
+                  />
+                </div>
+              )}
+            />
+          )}
+          <h3 className="text-xl font-medium text-custom-text-200">
+            {status ? t("common.update") : t("common.create")} {t("common.module").toLowerCase()}
+          </h3>
+        </div>
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: t("title_is_required"),
+                maxLength: {
+                  value: 255,
+                  message: t("title_should_be_less_than_255_characters"),
+                },
+              }}
+              render={({ field: { value, onChange } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  hasError={Boolean(errors?.name)}
+                  placeholder={t("title")}
+                  className="w-full text-base"
+                  tabIndex={getIndex("name")}
+                  autoFocus
+                />
+              )}
+            />
+            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+          </div>
+          <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  value={value}
+                  onChange={onChange}
+                  placeholder={t("description")}
+                  className="w-full text-base resize-none min-h-24"
+                  hasError={Boolean(errors?.description)}
+                  tabIndex={getIndex("description")}
+                />
+              )}
+            />
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              control={control}
+              name="start_date"
+              render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
+                <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => (
+                    <DateRangeDropdown
+                      buttonVariant="border-with-text"
+                      className="h-7"
+                      value={{
+                        from: getDate(startDateValue),
+                        to: getDate(endDateValue),
+                      }}
+                      onSelect={(val) => {
+                        onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
+                        onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
+                      }}
+                      placeholder={{
+                        from: t("start_date"),
+                        to: t("end_date"),
+                      }}
+                      hideIcon={{
+                        to: true,
+                      }}
+                      tabIndex={getIndex("date_range")}
+                    />
+                  )}
+                />
+              )}
+            />
+            <div className="h-7">
+              <ModuleStatusSelect control={control} error={errors.status} tabIndex={getIndex("status")} />
+            </div>
+            <Controller
+              control={control}
+              name="lead_id"
+              render={({ field: { value, onChange } }) => (
+                <div className="h-7">
+                  <MemberDropdown
+                    value={value}
+                    onChange={onChange}
+                    projectId={projectId}
+                    multiple={false}
+                    buttonVariant="border-with-text"
+                    placeholder={t("lead")}
+                    tabIndex={getIndex("lead")}
+                  />
+                </div>
+              )}
+            />
+            <Controller
+              control={control}
+              name="member_ids"
+              render={({ field: { value, onChange } }) => (
+                <div className="h-7">
+                  <MemberDropdown
+                    value={value}
+                    onChange={onChange}
+                    projectId={projectId}
+                    multiple
+                    buttonVariant={value && value.length > 0 ? "transparent-without-text" : "border-with-text"}
+                    buttonClassName={value && value.length > 0 ? "hover:bg-transparent px-0" : ""}
+                    placeholder={t("members")}
+                    tabIndex={getIndex("member_ids")}
+                  />
+                </div>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
+        <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
+          {t("cancel")}
+        </Button>
+        <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
+          {status
+            ? isSubmitting
+              ? t("updating")
+              : t("project_module.update_module")
+            : isSubmitting
+              ? t("creating")
+              : t("project_module.create_module")}
+        </Button>
+      </div>
+    </form>
+  );
+};

apps/web/core/components/modules/gantt-chart/blocks.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+// ui
+import { MODULE_STATUS } from "@plane/constants";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+// components
+import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
+import { getBlockViewDetails } from "@/components/issues/issue-layouts/utils";
+// constants
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  const { message, blockStyle } = getBlockViewDetails(
+    moduleDetails,
+    MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color ?? ""
+  );
+
+  return (
+    <Tooltip
+      isMobile={isMobile}
+      tooltipContent={
+        <div className="space-y-1">
+          <h5>{moduleDetails?.name}</h5>
+          <div>{message}</div>
+        </div>
+      }
+      position="top-start"
+    >
+      <div
+        className="relative flex h-full w-full cursor-pointer items-center rounded"
+        style={blockStyle}
+        onClick={() =>
+          router.push(
+            `/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`
+          )
+        }
+      >
+        <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
+        <div
+          className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100"
+          style={{ left: `${SIDEBAR_WIDTH}px` }}
+        >
+          {moduleDetails?.name}
+        </div>
+      </div>
+    </Tooltip>
+  );
+});
+
+export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+
+  return (
+    <Link
+      className="relative flex h-full w-full items-center gap-2"
+      href={`/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
+      draggable={false}
+    >
+      <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
+      <h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>
+    </Link>
+  );
+});

apps/web/core/components/modules/gantt-chart/index.ts

@@ -0,0 +1,2 @@
+export * from "./blocks";
+export * from "./modules-list-layout";

apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx

@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// PLane
+import type { IBlockUpdateData, IBlockUpdateDependencyData, IModule } from "@plane/types";
+// components
+import { GanttChartRoot, ModuleGanttSidebar } from "@/components/gantt-chart";
+import { ETimeLineTypeType, TimeLineTypeContext } from "@/components/gantt-chart/contexts";
+import { ModuleGanttBlock } from "@/components/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useProject } from "@/hooks/store/use-project";
+
+export const ModulesListGanttChartView: React.FC = observer(() => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store
+  const { currentProjectDetails } = useProject();
+  const { getFilteredModuleIds, updateModuleDetails } = useModule();
+  const { currentProjectDisplayFilters: displayFilters } = useModuleFilter();
+
+  // derived values
+  const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined;
+
+  const handleModuleUpdate = async (module: IModule, data: IBlockUpdateData) => {
+    if (!workspaceSlug || !module) return;
+
+    const payload: any = { ...data };
+    if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
+
+    await updateModuleDetails(workspaceSlug.toString(), module.project_id, module.id, payload);
+  };
+
+  const updateBlockDates = async (blockUpdates: IBlockUpdateDependencyData[]) => {
+    const blockUpdate = blockUpdates[0];
+
+    if (!blockUpdate) return;
+
+    const payload: Partial<IModule> = {};
+
+    if (blockUpdate.start_date) payload.start_date = blockUpdate.start_date;
+    if (blockUpdate.target_date) payload.target_date = blockUpdate.target_date;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), blockUpdate.id, payload);
+  };
+
+  const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
+
+  if (!filteredModuleIds) return null;
+
+  return (
+    <TimeLineTypeContext.Provider value={ETimeLineTypeType.MODULE}>
+      <GanttChartRoot
+        title="Modules"
+        loaderTitle="Modules"
+        blockIds={filteredModuleIds}
+        sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
+        blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
+        blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={isAllowed && displayFilters?.order_by === "sort_order"}
+        enableAddBlock={isAllowed}
+        updateBlockDates={updateBlockDates}
+        showAllBlocks
+      />
+    </TimeLineTypeContext.Provider>
+  );
+});

apps/web/core/components/modules/index.ts

@@ -0,0 +1,20 @@
+export * from "./applied-filters";
+export * from "./dropdowns";
+export * from "./select";
+export * from "./sidebar-select";
+export * from "./delete-module-modal";
+export * from "./form";
+export * from "./gantt-chart";
+export * from "./links";
+export * from "./modal";
+export * from "./modules-list-view";
+export * from "./module-card-item";
+export * from "./module-list-item";
+export * from "./module-peek-overview";
+export * from "./quick-actions";
+export * from "./module-list-item-action";
+export * from "./module-view-header";
+export * from "./module-layout-icon";
+export * from "./analytics-sidebar";
+// archived modules
+export * from "./archived-modules";

apps/web/core/components/modules/links/create-update-modal.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import type { FC } from "react";
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+// plane types
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ILinkDetails, ModuleLink } from "@plane/types";
+// plane ui
+import { Input, ModalCore } from "@plane/ui";
+
+type Props = {
+  createLink: (formData: ModuleLink) => Promise<void>;
+  data?: ILinkDetails | null;
+  isOpen: boolean;
+  handleClose: () => void;
+  updateLink: (formData: ModuleLink, linkId: string) => Promise<void>;
+};
+
+const defaultValues: ModuleLink = {
+  title: "",
+  url: "",
+};
+
+export const CreateUpdateModuleLinkModal: FC<Props> = (props) => {
+  const { isOpen, handleClose, createLink, updateLink, data } = props;
+  // form info
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<ModuleLink>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+  };
+
+  const handleFormSubmit = async (formData: ModuleLink) => {
+    const parsedUrl = formData.url.startsWith("http") ? formData.url : `http://${formData.url}`;
+    const payload = {
+      title: formData.title,
+      url: parsedUrl,
+    };
+
+    try {
+      if (!data) {
+        await createLink(payload);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module link created successfully.",
+        });
+      } else {
+        await updateLink(payload, data.id);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module link updated successfully.",
+        });
+      }
+      onClose();
+    } catch (error: any) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: error?.data?.error ?? "Some error occurred. Please try again.",
+      });
+    }
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, isOpen, reset]);
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={onClose}>
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
+        <div className="space-y-5 p-5">
+          <h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Add"} link</h3>
+          <div className="mt-2 space-y-3">
+            <div>
+              <label htmlFor="url" className="mb-2 text-custom-text-200">
+                URL
+              </label>
+              <Controller
+                control={control}
+                name="url"
+                rules={{
+                  required: "URL is required",
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="url"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.url)}
+                    placeholder="Type or paste a URL"
+                    className="w-full"
+                  />
+                )}
+              />
+            </div>
+            <div>
+              <label htmlFor="title" className="mb-2 text-custom-text-200">
+                Display title
+                <span className="text-[10px] block">Optional</span>
+              </label>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="title"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.title)}
+                    placeholder="What you'd like to see this link as"
+                    className="w-full"
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
+          <Button variant="neutral-primary" size="sm" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+            {data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+};

apps/web/core/components/modules/links/index.ts

@@ -0,0 +1,3 @@
+export * from "./create-update-modal";
+export * from "./list-item";
+export * from "./list";

apps/web/core/components/modules/links/list-item.tsx

@@ -0,0 +1,105 @@
+import { observer } from "mobx-react";
+import { Copy, Pencil, Trash2 } from "lucide-react";
+// plane types
+import { MODULE_TRACKER_ELEMENTS } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { ILinkDetails } from "@plane/types";
+// plane ui
+import { getIconForLink, copyTextToClipboard, calculateTimeAgo } from "@plane/utils";
+// helpers
+//
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  handleDeleteLink: () => void;
+  handleEditLink: () => void;
+  isEditingAllowed: boolean;
+  link: ILinkDetails;
+};
+
+export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
+  const { handleDeleteLink, handleEditLink, isEditingAllowed, link } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const createdByDetails = getUserDetails(link.created_by);
+  // platform os
+  const { isMobile } = usePlatformOS();
+
+  const Icon = getIconForLink(link.url);
+
+  const copyToClipboard = (text: string) => {
+    copyTextToClipboard(text).then(() =>
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Copied to clipboard",
+        message: "The URL has been successfully copied to your clipboard",
+      })
+    );
+  };
+
+  return (
+    <div className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
+      <div className="flex w-full items-start justify-between gap-2">
+        <div className="flex items-start gap-2 truncate">
+          <span className="py-1">
+            <Icon className="size-3 stroke-2 text-custom-text-350 group-hover:text-custom-text-100 flex-shrink-0" />
+          </span>
+          <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
+            <a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-xs">
+              {link.title && link.title !== "" ? link.title : link.url}
+            </a>
+          </Tooltip>
+        </div>
+
+        <div className="z-[1] flex flex-shrink-0 items-center">
+          {isEditingAllowed && (
+            <button
+              type="button"
+              className="grid place-items-center p-1 hover:bg-custom-background-80"
+              data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleEditLink();
+              }}
+            >
+              <Pencil className="size-3 stroke-[1.5] text-custom-text-200" />
+            </button>
+          )}
+          <span
+            onClick={() => copyToClipboard(link.url)}
+            className="grid place-items-center p-1 hover:bg-custom-background-80 cursor-pointer"
+          >
+            <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
+          </span>
+          {isEditingAllowed && (
+            <button
+              type="button"
+              className="grid place-items-center p-1 hover:bg-custom-background-80"
+              data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleDeleteLink();
+              }}
+            >
+              <Trash2 className="size-3 stroke-[1.5] text-custom-text-200" />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="px-5">
+        <p className="flex items-center gap-1.5 mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
+          Added {calculateTimeAgo(link.created_at)}{" "}
+          {createdByDetails && (
+            <>by {createdByDetails?.is_bot ? createdByDetails?.first_name + " Bot" : createdByDetails?.display_name}</>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+});

apps/web/core/components/modules/links/list.tsx

@@ -0,0 +1,44 @@
+"use client";
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+// plane types
+import type { ILinkDetails } from "@plane/types";
+// components
+import { ModulesLinksListItem } from "@/components/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+
+type Props = {
+  disabled?: boolean;
+  handleDeleteLink: (linkId: string) => void;
+  handleEditLink: (link: ILinkDetails) => void;
+  moduleId: string;
+};
+
+export const ModuleLinksList: React.FC<Props> = observer((props) => {
+  const { moduleId, handleDeleteLink, handleEditLink, disabled } = props;
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const currentModule = getModuleById(moduleId);
+  const moduleLinks = currentModule?.link_module;
+  // memoized link handlers
+  const memoizedDeleteLink = useCallback((id: string) => handleDeleteLink(id), [handleDeleteLink]);
+  const memoizedEditLink = useCallback((link: ILinkDetails) => handleEditLink(link), [handleEditLink]);
+
+  if (!moduleLinks) return null;
+
+  return (
+    <>
+      {moduleLinks.map((link) => (
+        <ModulesLinksListItem
+          key={link.id}
+          handleDeleteLink={() => memoizedDeleteLink(link.id)}
+          handleEditLink={() => memoizedEditLink(link)}
+          isEditingAllowed={!disabled}
+          link={link}
+        />
+      ))}
+    </>
+  );
+});

apps/web/core/components/modules/modal.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useForm } from "react-hook-form";
+// types
+import { MODULE_TRACKER_EVENTS } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IModule } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// components
+import { ModuleForm } from "@/components/modules";
+// constants
+// helpers
+import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import useKeypress from "@/hooks/use-keypress";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  data?: IModule;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: "backlog",
+  lead_id: null,
+  member_ids: [],
+};
+
+export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data, workspaceSlug, projectId } = props;
+  // states
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+  // store hooks
+  const { workspaceProjectIds } = useProject();
+  const { createModule, updateModuleDetails } = useModule();
+  const { isMobile } = usePlatformOS();
+
+  const handleClose = () => {
+    reset(defaultValues);
+    onClose();
+  };
+
+  const { reset } = useForm<IModule>({
+    defaultValues,
+  });
+
+  const handleCreateModule = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const selectedProjectId = payload.project_id ?? projectId.toString();
+    await createModule(workspaceSlug.toString(), selectedProjectId, payload)
+      .then((res) => {
+        handleClose();
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module created successfully.",
+        });
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.create,
+          payload: { id: res.id },
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? err?.error ?? "Module could not be created. Please try again.",
+        });
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.create,
+          payload: { id: data?.id },
+          error: err,
+        });
+      });
+  };
+
+  const handleUpdateModule = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    const selectedProjectId = payload.project_id ?? projectId.toString();
+    await updateModuleDetails(workspaceSlug.toString(), selectedProjectId, data.id, payload)
+      .then((res) => {
+        handleClose();
+
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module updated successfully.",
+        });
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.update,
+          payload: { id: res.id },
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? err?.error ?? "Module could not be updated. Please try again.",
+        });
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.update,
+          payload: { id: data.id },
+          error: err,
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload: Partial<IModule> = {
+      ...formData,
+    };
+    if (!data) await handleCreateModule(payload);
+    else await handleUpdateModule(payload);
+  };
+
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project_id) {
+      setActiveProject(data.project_id);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProject)
+      setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
+  }, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
+
+  useKeypress("Escape", () => {
+    if (isOpen) handleClose();
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <ModuleForm
+        handleFormSubmit={handleFormSubmit}
+        handleClose={handleClose}
+        status={data ? true : false}
+        projectId={activeProject ?? ""}
+        setActiveProject={setActiveProject}
+        data={data}
+        isMobile={isMobile}
+      />
+    </ModalCore>
+  );
+});

apps/web/core/components/modules/module-card-item.tsx

@@ -0,0 +1,297 @@
+"use client";
+
+import type { SyntheticEvent } from "react";
+import React, { useRef } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Info, SquareUser } from "lucide-react";
+// plane package imports
+import {
+  MODULE_STATUS,
+  PROGRESS_STATE_GROUPS_DETAILS,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  IS_FAVORITE_MENU_OPEN,
+  MODULE_TRACKER_EVENTS,
+  MODULE_TRACKER_ELEMENTS,
+} from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { WorkItemsIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { IModule } from "@plane/types";
+import { Card, FavoriteStar, LinearProgressIndicator } from "@plane/ui";
+import { getDate, renderFormattedPayloadDate, generateQueryParams } from "@plane/utils";
+// components
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { ModuleQuickActions } from "@/components/modules";
+import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
+// helpers
+import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web constants
+
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleCardItem: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  // refs
+  const parentRef = useRef(null);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { getModuleById, addModuleToFavorites, removeModuleFromFavorites, updateModuleDetails } = useModule();
+  const { getUserDetails } = useMember();
+
+  // local storage
+  const { setValue: toggleFavoriteMenu, storedValue } = useLocalStorage<boolean>(IS_FAVORITE_MENU_OPEN, false);
+
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const isDisabled = !isEditingAllowed || !!moduleDetails?.archived_at;
+  const renderIcon = Boolean(moduleDetails?.start_date) || Boolean(moduleDetails?.target_date);
+
+  const { isMobile } = usePlatformOS();
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then(
+      () => {
+        if (!storedValue) toggleFavoriteMenu(true);
+        captureElementAndEvent({
+          element: {
+            elementName: MODULE_TRACKER_ELEMENTS.CARD_ITEM,
+          },
+          event: {
+            eventName: MODULE_TRACKER_EVENTS.favorite,
+            payload: { id: moduleId },
+            state: "SUCCESS",
+          },
+        });
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding module to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the module to favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const removeFromFavoritePromise = removeModuleFromFavorites(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      moduleId
+    ).then(() => {
+      captureElementAndEvent({
+        element: {
+          elementName: MODULE_TRACKER_ELEMENTS.CARD_ITEM,
+        },
+        event: {
+          eventName: MODULE_TRACKER_EVENTS.unfavorite,
+          payload: { id: moduleId },
+          state: "SUCCESS",
+        },
+      });
+    });
+
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing module from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the module from favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleEventPropagation = (e: SyntheticEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const handleModuleDetailsChange = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId, payload)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module updated successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? "Module could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const query = generateQueryParams(searchParams, ["peekModule"]);
+    if (searchParams.has("peekModule") && searchParams.get("peekModule") === moduleId) {
+      router.push(`${pathname}?${query}`);
+    } else {
+      router.push(`${pathname}?${query && `${query}&`}peekModule=${moduleId}`);
+    }
+  };
+
+  if (!moduleDetails) return null;
+
+  const moduleTotalIssues =
+    moduleDetails.backlog_issues +
+    moduleDetails.unstarted_issues +
+    moduleDetails.started_issues +
+    moduleDetails.completed_issues +
+    moduleDetails.cancelled_issues;
+
+  const moduleCompletedIssues = moduleDetails.completed_issues;
+
+  // const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  const issueCount = module
+    ? !moduleTotalIssues || moduleTotalIssues === 0
+      ? `0 work items`
+      : moduleTotalIssues === moduleCompletedIssues
+        ? `${moduleTotalIssues} Work item${moduleTotalIssues > 1 ? `s` : ``}`
+        : `${moduleCompletedIssues}/${moduleTotalIssues} Work items`
+    : `0 work items`;
+
+  const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
+
+  const progressIndicatorData = PROGRESS_STATE_GROUPS_DETAILS.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: moduleTotalIssues > 0 ? (moduleDetails[group.key as keyof IModule] as number) : 0,
+    color: group.color,
+  }));
+
+  return (
+    <div className="relative" data-prevent-progress>
+      <Link ref={parentRef} href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
+        <Card>
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
+                <span className="truncate text-base font-medium">{moduleDetails.name}</span>
+              </Tooltip>
+              <div className="flex items-center gap-2" onClick={handleEventPropagation}>
+                {moduleStatus && (
+                  <ModuleStatusDropdown
+                    isDisabled={isDisabled}
+                    moduleDetails={moduleDetails}
+                    handleModuleDetailsChange={handleModuleDetailsChange}
+                  />
+                )}
+                <button onClick={openModuleOverview}>
+                  <Info className="h-4 w-4 text-custom-text-400" />
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-custom-text-200">
+                <WorkItemsIcon className="h-4 w-4 text-custom-text-300" />
+                <span className="text-xs text-custom-text-300">{issueCount ?? "0 Work item"}</span>
+              </div>
+              {moduleLeadDetails ? (
+                <span className="cursor-default">
+                  <ButtonAvatars showTooltip={false} userIds={moduleLeadDetails?.id} />
+                </span>
+              ) : (
+                <Tooltip tooltipContent="No lead">
+                  <SquareUser className="h-4 w-4 mx-1 text-custom-text-300 " />
+                </Tooltip>
+              )}
+            </div>
+            <LinearProgressIndicator size="lg" data={progressIndicatorData} />
+            <div className="flex items-center justify-between py-0.5" onClick={handleEventPropagation}>
+              <DateRangeDropdown
+                buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs`}
+                buttonVariant="transparent-with-text"
+                className="h-7"
+                value={{
+                  from: getDate(moduleDetails.start_date),
+                  to: getDate(moduleDetails.target_date),
+                }}
+                onSelect={(val) => {
+                  handleModuleDetailsChange({
+                    start_date: val?.from ? renderFormattedPayloadDate(val.from) : null,
+                    target_date: val?.to ? renderFormattedPayloadDate(val.to) : null,
+                  });
+                }}
+                placeholder={{
+                  from: "Start date",
+                  to: "End date",
+                }}
+                disabled={isDisabled}
+                hideIcon={{ from: renderIcon ?? true, to: renderIcon }}
+              />
+            </div>
+          </div>
+        </Card>
+      </Link>
+      <div className="absolute right-4 bottom-[18px] flex items-center gap-1.5">
+        {isEditingAllowed && (
+          <FavoriteStar
+            onClick={(e) => {
+              if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+              else handleAddToFavorites(e);
+            }}
+            selected={!!moduleDetails.is_favorite}
+          />
+        )}
+        {workspaceSlug && projectId && (
+          <ModuleQuickActions
+            parentRef={parentRef}
+            moduleId={moduleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        )}
+      </div>
+    </div>
+  );
+});

apps/web/core/components/modules/module-layout-icon.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
+import type { TModuleLayoutOptions } from "@plane/types";
+import { cn } from "@plane/utils";
+
+interface ILayoutIcon {
+  className?: string;
+  containerClassName?: string;
+  layoutType: TModuleLayoutOptions;
+  size?: number;
+  withContainer?: boolean;
+}
+
+export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
+  const { layoutType, className = "", containerClassName = "", size = 14, withContainer = false } = props;
+
+  // get Layout icon
+  const icons = {
+    list: List,
+    board: LayoutGrid,
+    gantt: GanttChartSquare,
+  };
+  const Icon = icons[layoutType ?? "list"];
+
+  if (!Icon) return null;
+
+  return (
+    <>
+      {withContainer ? (
+        <div className={cn("flex items-center justify-center border rounded p-0.5 flex-shrink-0", containerClassName)}>
+          <Icon size={size} className={cn(className)} />
+        </div>
+      ) : (
+        <Icon size={size} className={cn("flex-shrink-0", className)} />
+      )}
+    </>
+  );
+};

apps/web/core/components/modules/module-list-item-action.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import type { FC } from "react";
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { SquareUser } from "lucide-react";
+// types
+import {
+  MODULE_STATUS,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  IS_FAVORITE_MENU_OPEN,
+  MODULE_TRACKER_EVENTS,
+  MODULE_TRACKER_ELEMENTS,
+} from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { IModule } from "@plane/types";
+// ui
+import { FavoriteStar } from "@plane/ui";
+// components
+import { renderFormattedPayloadDate, getDate } from "@plane/utils";
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { ModuleQuickActions } from "@/components/modules";
+import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
+// constants
+// helpers
+import { captureElementAndEvent, captureError } from "@/helpers/event-tracker.helper";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useUserPermissions } from "@/hooks/store/user";
+import { ButtonAvatars } from "../dropdowns/member/avatar";
+
+type Props = {
+  moduleId: string;
+  moduleDetails: IModule;
+  parentRef: React.RefObject<HTMLDivElement>;
+};
+
+export const ModuleListItemAction: FC<Props> = observer((props) => {
+  const { moduleId, moduleDetails, parentRef } = props;
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  //   store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { addModuleToFavorites, removeModuleFromFavorites, updateModuleDetails } = useModule();
+  const { getUserDetails } = useMember();
+
+  const { t } = useTranslation();
+
+  // local storage
+  const { setValue: toggleFavoriteMenu, storedValue } = useLocalStorage<boolean>(IS_FAVORITE_MENU_OPEN, false);
+  // derived values
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const isDisabled = !isEditingAllowed || !!moduleDetails?.archived_at;
+  const renderIcon = Boolean(moduleDetails.start_date) || Boolean(moduleDetails.target_date);
+
+  // handlers
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
+      .then(() => {
+        // open favorites menu if closed
+        if (!storedValue) toggleFavoriteMenu(true);
+        captureElementAndEvent({
+          element: {
+            elementName: MODULE_TRACKER_ELEMENTS.LIST_ITEM,
+          },
+          event: {
+            eventName: MODULE_TRACKER_EVENTS.favorite,
+            payload: { id: moduleId },
+            state: "SUCCESS",
+          },
+        });
+      })
+      .catch((error) => {
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.favorite,
+          payload: { id: moduleId },
+          error,
+        });
+      });
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding module to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the module to favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const removeFromFavoritePromise = removeModuleFromFavorites(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      moduleId
+    )
+      .then(() => {
+        captureElementAndEvent({
+          element: {
+            elementName: MODULE_TRACKER_ELEMENTS.LIST_ITEM,
+          },
+          event: {
+            eventName: MODULE_TRACKER_EVENTS.unfavorite,
+            payload: { id: moduleId },
+            state: "SUCCESS",
+          },
+        });
+      })
+      .catch((error) => {
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.unfavorite,
+          payload: { id: moduleId },
+          error,
+        });
+      });
+
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing module from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the module from favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleModuleDetailsChange = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId, payload)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module updated successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? "Module could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
+
+  return (
+    <>
+      <DateRangeDropdown
+        buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs`}
+        buttonVariant="transparent-with-text"
+        className="h-7"
+        value={{
+          from: getDate(moduleDetails.start_date),
+          to: getDate(moduleDetails.target_date),
+        }}
+        onSelect={(val) => {
+          handleModuleDetailsChange({
+            start_date: val?.from ? renderFormattedPayloadDate(val.from) : null,
+            target_date: val?.to ? renderFormattedPayloadDate(val.to) : null,
+          });
+        }}
+        mergeDates
+        placeholder={{
+          from: t("start_date"),
+          to: t("end_date"),
+        }}
+        disabled={isDisabled}
+        hideIcon={{ from: renderIcon ?? true, to: renderIcon }}
+      />
+
+      {moduleStatus && (
+        <ModuleStatusDropdown
+          isDisabled={isDisabled}
+          moduleDetails={moduleDetails}
+          handleModuleDetailsChange={handleModuleDetailsChange}
+        />
+      )}
+
+      {moduleLeadDetails ? (
+        <span className="cursor-default">
+          <ButtonAvatars showTooltip={false} userIds={moduleLeadDetails?.id} />
+        </span>
+      ) : (
+        <Tooltip tooltipContent="No lead">
+          <SquareUser className="h-4 w-4 text-custom-text-300" />
+        </Tooltip>
+      )}
+
+      {isEditingAllowed && !moduleDetails.archived_at && (
+        <FavoriteStar
+          onClick={(e) => {
+            if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+            else handleAddToFavorites(e);
+          }}
+          selected={moduleDetails.is_favorite}
+        />
+      )}
+      {workspaceSlug && projectId && (
+        <div className="hidden md:block">
+          <ModuleQuickActions
+            parentRef={parentRef}
+            moduleId={moduleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/module-list-item.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import React, { useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+// icons
+import { Check, Info } from "lucide-react";
+// ui
+import { CircularProgressIndicator } from "@plane/ui";
+// components
+import { generateQueryParams } from "@plane/utils";
+import { ListItem } from "@/components/core/list";
+import { ModuleListItemAction, ModuleQuickActions } from "@/components/modules";
+// helpers
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleListItem: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  // refs
+  const parentRef = useRef(null);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  // store hooks
+  const { getModuleById } = useModule();
+  const { isMobile } = usePlatformOS();
+
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+
+  if (!moduleDetails) return null;
+
+  const completionPercentage =
+    ((moduleDetails.completed_issues + moduleDetails.cancelled_issues) / moduleDetails.total_issues) * 100;
+
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
+
+  const completedModuleCheck = moduleDetails.status === "completed";
+
+  // handlers
+  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const query = generateQueryParams(searchParams, ["peekModule"]);
+    if (searchParams.has("peekModule") && searchParams.get("peekModule") === moduleId) {
+      router.push(`${pathname}?${query}`);
+    } else {
+      router.push(`${pathname}?${query && `${query}&`}peekModule=${moduleId}`);
+    }
+  };
+
+  const handleArchivedModuleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    openModuleOverview(e);
+  };
+
+  const handleItemClick = moduleDetails.archived_at ? handleArchivedModuleClick : undefined;
+
+  return (
+    <ListItem
+      title={moduleDetails?.name ?? ""}
+      itemLink={`/${workspaceSlug?.toString()}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
+      onItemClick={handleItemClick}
+      prependTitleElement={
+        <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
+          {completedModuleCheck ? (
+            progress === 100 ? (
+              <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+            ) : (
+              <span className="text-sm text-custom-primary-100">{`!`}</span>
+            )
+          ) : progress === 100 ? (
+            <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+          ) : (
+            <span className="text-[9px] text-custom-text-300">{`${progress}%`}</span>
+          )}
+        </CircularProgressIndicator>
+      }
+      appendTitleElement={
+        <button
+          onClick={openModuleOverview}
+          className={`z-[5] flex-shrink-0 ${isMobile ? "flex" : "hidden group-hover:flex"}`}
+        >
+          <Info className="h-4 w-4 text-custom-text-400" />
+        </button>
+      }
+      actionableItems={<ModuleListItemAction moduleId={moduleId} moduleDetails={moduleDetails} parentRef={parentRef} />}
+      quickActionElement={
+        <div className="block md:hidden">
+          <ModuleQuickActions
+            parentRef={parentRef}
+            moduleId={moduleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        </div>
+      }
+      isMobile={isMobile}
+      parentRef={parentRef}
+    />
+  );
+});

apps/web/core/components/modules/module-peek-overview.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { usePathname, useSearchParams } from "next/navigation";
+// hooks
+import { generateQueryParams } from "@plane/utils";
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+// components
+import { ModuleAnalyticsSidebar } from "./";
+
+type Props = {
+  projectId: string;
+  workspaceSlug: string;
+  isArchived?: boolean;
+};
+
+export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
+  // router
+  const router = useAppRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const peekModule = searchParams.get("peekModule");
+  // refs
+  const ref = React.useRef(null);
+  // store hooks
+  const { fetchModuleDetails, fetchArchivedModuleDetails } = useModule();
+
+  const handleClose = () => {
+    const query = generateQueryParams(searchParams, ["peekModule"]);
+    router.push(`${pathname}?${query}`);
+  };
+
+  useEffect(() => {
+    if (!peekModule) return;
+    if (isArchived) fetchArchivedModuleDetails(workspaceSlug, projectId, peekModule.toString());
+    else fetchModuleDetails(workspaceSlug, projectId, peekModule.toString());
+  }, [fetchArchivedModuleDetails, fetchModuleDetails, isArchived, peekModule, projectId, workspaceSlug]);
+
+  return (
+    <>
+      {peekModule && (
+        <div
+          ref={ref}
+          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 absolute md:relative right-0 z-[9]"
+          style={{
+            boxShadow:
+              "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+          }}
+        >
+          <ModuleAnalyticsSidebar
+            moduleId={peekModule?.toString() ?? ""}
+            handleClose={handleClose}
+            isArchived={isArchived}
+          />
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/module-status-dropdown.tsx

@@ -0,0 +1,55 @@
+import type { FC } from "react";
+import React from "react";
+import { observer } from "mobx-react";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TModuleStatus } from "@plane/propel/icons";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import type { IModule } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+
+type Props = {
+  isDisabled: boolean;
+  moduleDetails: IModule;
+  handleModuleDetailsChange: (payload: Partial<IModule>) => Promise<void>;
+};
+
+export const ModuleStatusDropdown: FC<Props> = observer((props: Props) => {
+  const { isDisabled, moduleDetails, handleModuleDetailsChange } = props;
+  const { t } = useTranslation();
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  if (!moduleStatus) return <></>;
+
+  return (
+    <CustomSelect
+      customButton={
+        <span
+          className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
+            isDisabled ? "cursor-not-allowed" : "cursor-pointer"
+          }`}
+          style={{
+            color: moduleStatus ? moduleStatus.color : "#a3a3a2",
+            backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
+          }}
+        >
+          {(moduleStatus && t(moduleStatus?.i18n_label)) ?? t("project_modules.status.backlog")}
+        </span>
+      }
+      value={moduleStatus?.value}
+      onChange={(val: TModuleStatus) => {
+        handleModuleDetailsChange({ status: val });
+      }}
+      disabled={isDisabled}
+    >
+      {MODULE_STATUS.map((status) => (
+        <CustomSelect.Option key={status.value} value={status.value}>
+          <div className="flex items-center gap-2">
+            <ModuleStatusIcon status={status.value} />
+            {t(status.i18n_label)}
+          </div>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+});

apps/web/core/components/modules/module-view-header.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import type { FC } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { ListFilter, Search, X } from "lucide-react";
+// plane helpers
+import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { TModuleFilters } from "@plane/types";
+// ui
+import { cn, calculateTotalFilters } from "@plane/utils";
+// plane utils
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules/dropdowns";
+// constants
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { ModuleLayoutIcon } from "./module-layout-icon";
+// i18n
+
+export const ModuleViewHeader: FC = observer(() => {
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // router
+  const { projectId } = useParams();
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // store hooks
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  const {
+    currentProjectDisplayFilters: displayFilters,
+    currentProjectFilters: filters,
+    searchQuery,
+    updateDisplayFilters,
+    updateFilters,
+    updateSearchQuery,
+  } = useModuleFilter();
+  const { t } = useTranslation();
+
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
+
+  // handlers
+  const handleFilters = useCallback(
+    (key: keyof TModuleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = filters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues });
+    },
+    [filters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  useEffect(() => {
+    if (searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [searchQuery]);
+
+  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0 || displayFilters?.favorites;
+
+  return (
+    <div className="hidden h-full sm:flex items-center gap-3 self-end">
+      <div className="flex items-center">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+          >
+            <Search className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div
+          className={cn(
+            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            {
+              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <Search className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            placeholder="Search"
+            value={searchQuery}
+            onChange={(e) => updateSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                // updateSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <ModuleOrderByDropdown
+        value={displayFilters?.order_by}
+        onChange={(val) => {
+          if (!projectId || val === displayFilters?.order_by) return;
+          updateDisplayFilters(projectId.toString(), {
+            order_by: val,
+          });
+        }}
+      />
+      <FiltersDropdown
+        icon={<ListFilter className="h-3 w-3" />}
+        title="Filters"
+        placement="bottom-end"
+        isFiltersApplied={isFiltersApplied}
+      >
+        <ModuleFiltersSelection
+          displayFilters={displayFilters ?? {}}
+          filters={filters ?? {}}
+          handleDisplayFiltersUpdate={(val) => {
+            if (!projectId) return;
+            updateDisplayFilters(projectId.toString(), val);
+          }}
+          handleFiltersUpdate={handleFilters}
+          memberIds={workspaceMemberIds ?? undefined}
+        />
+      </FiltersDropdown>
+      <div className="hidden md:flex items-center gap-1 rounded bg-custom-background-80 p-1">
+        {MODULE_VIEW_LAYOUTS.map((layout) => (
+          <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
+            <button
+              type="button"
+              className={cn(
+                "group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100",
+                {
+                  "bg-custom-background-100 shadow-custom-shadow-2xs": displayFilters?.layout === layout.key,
+                }
+              )}
+              onClick={() => {
+                if (!projectId) return;
+                updateDisplayFilters(projectId.toString(), { layout: layout.key });
+              }}
+            >
+              <ModuleLayoutIcon layoutType={layout.key} />
+            </button>
+          </Tooltip>
+        ))}
+      </div>
+    </div>
+  );
+});

apps/web/core/components/modules/modules-list-view.tsx

@@ -0,0 +1,131 @@
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useParams, useSearchParams } from "next/navigation";
+// components
+import { EUserPermissionsLevel, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EUserProjectRoles } from "@plane/types";
+import { ContentWrapper, Row, ERowVariant } from "@plane/ui";
+import { ListLayout } from "@/components/core/list";
+import { ComicBoxButton } from "@/components/empty-state/comic-box-button";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
+import { CycleModuleBoardLayoutLoader } from "@/components/ui/loader/cycle-module-board-loader";
+import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+import { GanttLayoutLoader } from "@/components/ui/loader/layouts/gantt-layout-loader";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+import AllFiltersImage from "@/public/empty-state/module/all-filters.svg";
+import NameFilterImage from "@/public/empty-state/module/name-filter.svg";
+
+export const ModulesListView: React.FC = observer(() => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  const searchParams = useSearchParams();
+  const peekModule = searchParams.get("peekModule");
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { toggleCreateModuleModal } = useCommandPalette();
+  const { getProjectModuleIds, getFilteredModuleIds, loader } = useModule();
+  const { currentProjectDisplayFilters: displayFilters, searchQuery } = useModuleFilter();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const projectModuleIds = projectId ? getProjectModuleIds(projectId.toString()) : undefined;
+  const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined;
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const generalViewResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/onboarding/modules",
+  });
+
+  if (loader || !projectModuleIds || !filteredModuleIds)
+    return (
+      <>
+        {displayFilters?.layout === "list" && <CycleModuleListLayoutLoader />}
+        {displayFilters?.layout === "board" && <CycleModuleBoardLayoutLoader />}
+        {displayFilters?.layout === "gantt" && <GanttLayoutLoader />}
+      </>
+    );
+
+  if (projectModuleIds.length === 0)
+    return (
+      <DetailedEmptyState
+        title={t("project_module.empty_state.general.title")}
+        description={t("project_module.empty_state.general.description")}
+        assetPath={generalViewResolvedPath}
+        customPrimaryButton={
+          <ComicBoxButton
+            label={t("project_module.empty_state.general.primary_button.text")}
+            title={t("project_module.empty_state.general.primary_button.comic.title")}
+            description={t("project_module.empty_state.general.primary_button.comic.description")}
+            data-ph-element={MODULE_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON}
+            onClick={() => {
+              toggleCreateModuleModal(true);
+            }}
+            disabled={!canPerformEmptyStateActions}
+          />
+        }
+      />
+    );
+
+  if (filteredModuleIds.length === 0)
+    return (
+      <div className="grid h-full w-full place-items-center">
+        <div className="text-center">
+          <Image
+            src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
+            alt="No matching modules"
+          />
+          <h5 className="mb-1 mt-7 text-xl font-medium">No matching modules</h5>
+          <p className="text-base text-custom-text-400">
+            {searchQuery.trim() === ""
+              ? "Remove the filters to see all modules"
+              : "Remove the search criteria to see all modules"}
+          </p>
+        </div>
+      </div>
+    );
+
+  return (
+    <ContentWrapper variant={ERowVariant.HUGGING}>
+      <div className="size-full flex justify-between">
+        {displayFilters?.layout === "list" && (
+          <ListLayout>
+            {filteredModuleIds.map((moduleId) => (
+              <ModuleListItem key={moduleId} moduleId={moduleId} />
+            ))}
+          </ListLayout>
+        )}
+        {displayFilters?.layout === "board" && (
+          <Row
+            className={`size-full py-page-y grid grid-cols-1 gap-6 overflow-y-auto ${
+              peekModule
+                ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
+                : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
+            } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`}
+          >
+            {filteredModuleIds.map((moduleId) => (
+              <ModuleCardItem key={moduleId} moduleId={moduleId} />
+            ))}
+          </Row>
+        )}
+        {displayFilters?.layout === "gantt" && (
+          <div className="size-full overflow-hidden">
+            <ModulesListGanttChartView />
+          </div>
+        )}
+        <div className="flex-shrink-0">
+          <ModulePeekOverview projectId={projectId?.toString() ?? ""} workspaceSlug={workspaceSlug?.toString() ?? ""} />
+        </div>
+      </div>
+    </ContentWrapper>
+  );
+});

apps/web/core/components/modules/quick-actions.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+
+// icons
+import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
+// plane imports
+import {
+  EUserPermissions,
+  EUserPermissionsLevel,
+  MODULE_TRACKER_ELEMENTS,
+  MODULE_TRACKER_EVENTS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { ArchiveIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TContextMenuItem } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { copyUrlToClipboard, cn } from "@plane/utils";
+// components
+import { ArchiveModuleModal, CreateUpdateModuleModal, DeleteModuleModal } from "@/components/modules";
+// helpers
+import { captureClick, captureSuccess, captureError } from "@/helpers/event-tracker.helper";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  parentRef: React.RefObject<HTMLDivElement>;
+  moduleId: string;
+  projectId: string;
+  workspaceSlug: string;
+  customClassName?: string;
+};
+
+export const ModuleQuickActions: React.FC<Props> = observer((props) => {
+  const { parentRef, moduleId, projectId, workspaceSlug, customClassName } = props;
+  // router
+  const router = useAppRouter();
+  // states
+  const [editModal, setEditModal] = useState(false);
+  const [archiveModuleModal, setArchiveModuleModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+
+  const { getModuleById, restoreModule } = useModule();
+
+  const { t } = useTranslation();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  const isArchived = !!moduleDetails?.archived_at;
+  // auth
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+
+  const moduleState = moduleDetails?.status?.toLocaleLowerCase();
+  const isInArchivableGroup = !!moduleState && ["completed", "cancelled"].includes(moduleState);
+
+  const moduleLink = `${workspaceSlug}/projects/${projectId}/modules/${moduleId}`;
+  const handleCopyText = () =>
+    copyUrlToClipboard(moduleLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "Module link copied to clipboard.",
+      });
+    });
+  const handleOpenInNewTab = () => window.open(`/${moduleLink}`, "_blank");
+
+  const handleEditModule = () => {
+    setEditModal(true);
+  };
+
+  const handleArchiveModule = () => setArchiveModuleModal(true);
+
+  const handleRestoreModule = async () =>
+    await restoreModule(workspaceSlug, projectId, moduleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: "Your module can be found in project modules.",
+        });
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.restore,
+          payload: { id: moduleId },
+        });
+        router.push(`/${workspaceSlug}/projects/${projectId}/archives/modules`);
+      })
+      .catch((error) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Module could not be restored. Please try again.",
+        });
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.restore,
+          payload: { id: moduleId },
+          error,
+        });
+      });
+
+  const handleDeleteModule = () => {
+    setDeleteModal(true);
+  };
+
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "edit",
+      title: t("edit"),
+      icon: Pencil,
+      action: handleEditModule,
+      shouldRender: isEditingAllowed && !isArchived,
+    },
+    {
+      key: "open-new-tab",
+      action: handleOpenInNewTab,
+      title: t("open_in_new_tab"),
+      icon: ExternalLink,
+      shouldRender: !isArchived,
+    },
+    {
+      key: "copy-link",
+      action: handleCopyText,
+      title: t("copy_link"),
+      icon: LinkIcon,
+      shouldRender: !isArchived,
+    },
+    {
+      key: "archive",
+      action: handleArchiveModule,
+      title: t("archive"),
+      description: isInArchivableGroup ? undefined : t("project_module.quick_actions.archive_module_description"),
+      icon: ArchiveIcon,
+      className: "items-start",
+      iconClassName: "mt-1",
+      shouldRender: isEditingAllowed && !isArchived,
+      disabled: !isInArchivableGroup,
+    },
+    {
+      key: "restore",
+      action: handleRestoreModule,
+      title: t("restore"),
+      icon: ArchiveRestoreIcon,
+      shouldRender: isEditingAllowed && isArchived,
+    },
+    {
+      key: "delete",
+      action: handleDeleteModule,
+      title: t("delete"),
+      icon: Trash2,
+      shouldRender: isEditingAllowed,
+    },
+  ];
+
+  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
+    ...item,
+    onClick: () => {
+      captureClick({
+        elementName: MODULE_TRACKER_ELEMENTS.CONTEXT_MENU,
+      });
+      item.action();
+    },
+  }));
+
+  return (
+    <>
+      {moduleDetails && (
+        <div className="fixed">
+          <CreateUpdateModuleModal
+            isOpen={editModal}
+            onClose={() => setEditModal(false)}
+            data={moduleDetails}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+          />
+          <ArchiveModuleModal
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            moduleId={moduleId}
+            isOpen={archiveModuleModal}
+            handleClose={() => setArchiveModuleModal(false)}
+          />
+          <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
+        </div>
+      )}
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu ellipsis placement="bottom-end" closeOnSelect buttonClassName={customClassName}>
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                captureClick({
+                  elementName: MODULE_TRACKER_ELEMENTS.QUICK_ACTIONS,
+                });
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-custom-text-400": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("text-custom-text-300 whitespace-pre-line", {
+                      "text-custom-text-400": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});

apps/web/core/components/modules/select/index.ts

@@ -0,0 +1 @@
+export * from "./status";

apps/web/core/components/modules/select/status.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+
+// react hook form
+import type { FieldError, Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { DoubleCircleIcon, ModuleStatusIcon } from "@plane/propel/icons";
+import type { IModule } from "@plane/types";
+// ui
+import { CustomSelect } from "@plane/ui";
+// types
+// constants
+
+type Props = {
+  control: Control<IModule, any>;
+  error?: FieldError;
+  tabIndex?: number;
+};
+
+export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }) => {
+  const { t } = useTranslation();
+  return (
+    <Controller
+      control={control}
+      rules={{ required: true }}
+      name="status"
+      render={({ field: { value, onChange } }) => {
+        const selectedValue = MODULE_STATUS.find((s) => s.value === value);
+        return (
+          <CustomSelect
+            value={value}
+            label={
+              <div className={`flex items-center justify-center gap-2 text-xs py-0.5 ${error ? "text-red-500" : ""}`}>
+                {value ? (
+                  <ModuleStatusIcon status={value} />
+                ) : (
+                  <DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
+                )}
+                {(selectedValue && t(selectedValue?.i18n_label)) ?? (
+                  <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
+                )}
+              </div>
+            }
+            onChange={onChange}
+            tabIndex={tabIndex}
+            noChevron
+          >
+            {MODULE_STATUS.map((status) => (
+              <CustomSelect.Option key={status.value} value={status.value}>
+                <div className="flex items-center gap-2">
+                  <ModuleStatusIcon status={status.value} />
+                  {t(status.i18n_label)}
+                </div>
+              </CustomSelect.Option>
+            ))}
+          </CustomSelect>
+        );
+      }}
+    />
+  );
+};

apps/web/core/components/modules/sidebar-select/index.ts

@@ -0,0 +1 @@
+export * from "./select-status";

apps/web/core/components/modules/sidebar-select/select-status.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+// react
+import React from "react";
+// react-hook-form
+import type { Control, UseFormWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { DoubleCircleIcon } from "@plane/propel/icons";
+import type { IModule } from "@plane/types";
+// ui
+import { CustomSelect } from "@plane/ui";
+// types
+// common
+// constants
+
+type Props = {
+  control: Control<Partial<IModule>, any>;
+  submitChanges: (formData: Partial<IModule>) => void;
+  watch: UseFormWatch<Partial<IModule>>;
+};
+
+export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Status</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <Controller
+          control={control}
+          name="status"
+          render={({ field: { value } }) => (
+            <CustomSelect
+              label={
+                <span className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-custom-text-100"}`}>
+                  <span
+                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: MODULE_STATUS?.find((option) => option.value === value)?.color,
+                    }}
+                  />
+                  {watch("status")}
+                </span>
+              }
+              value={value}
+              onChange={(value: any) => {
+                submitChanges({ status: value });
+              }}
+            >
+              {MODULE_STATUS.map((option) => (
+                <CustomSelect.Option key={option.value} value={option.value}>
+                  <div className="flex items-center gap-2">
+                    <span className="h-2 w-2 flex-shrink-0 rounded-full" style={{ backgroundColor: option.color }} />
+                    {t(option.i18n_label)}
+                  </div>
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
+        />
+      </div>
+    </div>
+  );
+};