feat: add due date filters

apps/web/src/utils/dueDateFilters.ts

@@ -0,0 +1,63 @@
+import { addDays, endOfDay, startOfDay } from "date-fns";
+
+type DueDateFilterKey =
+  | "overdue"
+  | "today"
+  | "tomorrow"
+  | "next-week"
+  | "next-month"
+  | "no-due-date";
+
+export interface DueDateFilter {
+  startDate?: string;
+  endDate?: string;
+  hasNoDueDate?: boolean;
+}
+
+export const convertDueDateFiltersToRanges = (
+  filters: DueDateFilterKey[],
+): DueDateFilter[] => {
+  if (!filters.length) return [];
+
+  const today = startOfDay(new Date());
+  const tomorrow = addDays(today, 1);
+  const nextWeekEnd = addDays(today, 8); // 7 days ahead
+  const nextMonthEnd = addDays(today, 31); // 30 days ahead
+
+  return filters.map((filter) => {
+    switch (filter) {
+      case "overdue":
+        return {
+          endDate: today.toISOString(),
+        };
+      case "today":
+        return {
+          startDate: today.toISOString(),
+          endDate: endOfDay(today).toISOString(),
+        };
+      case "tomorrow":
+        return {
+          startDate: tomorrow.toISOString(),
+          endDate: endOfDay(tomorrow).toISOString(),
+        };
+      case "next-week": {
+        return {
+          startDate: today.toISOString(),
+          endDate: nextWeekEnd.toISOString(),
+        };
+      }
+      case "next-month": {
+        return {
+          startDate: nextWeekEnd.toISOString(),
+          endDate: nextMonthEnd.toISOString(),
+        };
+      }
+      case "no-due-date":
+        return {
+          hasNoDueDate: true,
+        };
+      default:
+        return {};
+    }
+  });
+};

apps/web/src/views/board/components/Filters.tsx

@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import {
   HiMiniXMark,
+  HiOutlineClock,
   HiOutlineSquare3Stack3D,
   HiOutlineTag,
   HiOutlineUserCircle,
@@ -60,7 +61,13 @@ const Filters = ({
     try {
       await router.push({
         pathname: router.pathname,
-        query: { ...router.query, members: [], labels: [], lists: [] },
+        query: {
+          ...router.query,
+          members: [],
+          labels: [],
+          lists: [],
+          dueDate: [],
+        },
       });
     } catch (error) {
       console.error(error);
@@ -99,6 +106,39 @@ const Filters = ({
     selected: !!router.query.lists?.includes(list.publicId),
   }));
 
+  const dueDateItems = [
+    {
+      key: "overdue",
+      value: t`Overdue`,
+      selected: !!router.query.dueDate?.includes("overdue"),
+    },
+    {
+      key: "today",
+      value: t`Due today`,
+      selected: !!router.query.dueDate?.includes("today"),
+    },
+    {
+      key: "tomorrow",
+      value: t`Due tomorrow`,
+      selected: !!router.query.dueDate?.includes("tomorrow"),
+    },
+    {
+      key: "next-week",
+      value: t`Due next week`,
+      selected: !!router.query.dueDate?.includes("next-week"),
+    },
+    {
+      key: "next-month",
+      value: t`Due next month`,
+      selected: !!router.query.dueDate?.includes("next-month"),
+    },
+    {
+      key: "no-due-date",
+      value: t`No dates`,
+      selected: !!router.query.dueDate?.includes("no-due-date"),
+    },
+  ];
+
   const groups = [
     ...(formattedMembers.length
       ? [
@@ -126,6 +166,12 @@ const Filters = ({
           },
         ]
       : []),
+    {
+      key: "dueDate",
+      label: t`Due date`,
+      icon: <HiOutlineClock size={16} />,
+      items: dueDateItems,
+    },
   ];
 
   const handleSelect = async (
@@ -156,6 +202,7 @@ const Filters = ({
     ...formatToArray(router.query.members),
     ...formatToArray(router.query.labels),
     ...formatToArray(router.query.lists),
+    ...formatToArray(router.query.dueDate),
   ].length;
 
   return (

apps/web/src/views/board/index.tsx

@@ -29,6 +29,7 @@ import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
+import { convertDueDateFiltersToRanges } from "~/utils/dueDateFilters";
 import { formatToArray } from "~/utils/helpers";
 import BoardDropdown from "./components/BoardDropdown";
 import Card from "./components/Card";
@@ -87,17 +88,28 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
     });
   };
 
+  const semanticFilters = formatToArray(router.query.dueDate) as (
+    | "overdue"
+    | "today"
+    | "tomorrow"
+    | "next-week"
+    | "next-month"
+    | "no-due-date"
+  )[];
+
   const queryParams: {
     boardPublicId: string;
     members: string[];
     labels: string[];
     lists: string[];
+    dueDate: ReturnType<typeof convertDueDateFiltersToRanges>;
     type: "regular" | "template";
   } = {
     boardPublicId: boardId ?? "",
     members: formatToArray(router.query.members),
     labels: formatToArray(router.query.labels),
     lists: formatToArray(router.query.lists),
+    dueDate: convertDueDateFiltersToRanges(semanticFilters),
     type: isTemplate ? "template" : "regular",
   };
 

apps/web/src/views/public/board/index.tsx

@@ -15,6 +15,7 @@ import ThemeToggle from "~/components/ThemeToggle";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
+import { convertDueDateFiltersToRanges } from "~/utils/dueDateFilters";
 import { formatToArray } from "~/utils/helpers";
 import Card from "~/views/board/components/Card";
 import Filters from "~/views/board/components/Filters";
@@ -38,6 +39,15 @@ export default function PublicBoardView() {
     ? router.query.workspaceSlug[0]
     : router.query.workspaceSlug;
 
+  const dueDateFilters = formatToArray(router.query.dueDate) as (
+    | "overdue"
+    | "today"
+    | "tomorrow"
+    | "next-week"
+    | "next-month"
+    | "no-due-date"
+  )[];
+
   const { data, isLoading } = api.board.bySlug.useQuery(
     {
       boardSlug: boardSlug ?? "",
@@ -45,6 +55,7 @@ export default function PublicBoardView() {
       members: formatToArray(router.query.members),
       labels: formatToArray(router.query.labels),
       lists: formatToArray(router.query.lists),
+      dueDate: convertDueDateFiltersToRanges(dueDateFilters),
     },
     {
       enabled: router.isReady && !!boardSlug,
@@ -77,7 +88,7 @@ export default function PublicBoardView() {
   };
 
   const pathWithoutQuery = router.asPath.split("?")[0];
-  const splitPath = pathWithoutQuery.split("/");
+  const splitPath = pathWithoutQuery?.split("/") ?? [];
   const cardPublicId = splitPath.length > 3 ? splitPath[3] : null;
 
   useEffect(() => {