feat: fix styles in filters

src/components/ModalCalendar.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/utils/class-merge";
 import { ClockIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { Dispatch, StateUpdater, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
 import { Calendar, CalendarPassThroughMethodOptions } from "primereact/calendar";
 import { FormEvent } from "primereact/ts-helpers";
 import Button from "./ui/Button";
@@ -36,6 +36,13 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({
   ...rest
 }) => {
   const [showTime, setShowTime] = useState(false);
+  const [minDate, setMinDate] = useState(new Date());
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setMinDate(new Date());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
   return (
     <ModalWindow
       {...rest}
@@ -53,6 +60,7 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({
           onChange={onChange}
           value={value}
           hourFormat="24"
+          minDate={minDate}
           showTime={showTime}
           pt={{
             root: ({ props }: CalendarPassThroughMethodOptions) => ({

src/components/ModalTags.tsx

@@ -8,6 +8,7 @@ import ModalWindow, { ModalWindowProps } from "./ui/Modal";
 export interface ITags {
   first: string;
   second: string;
+  overdue: boolean;
 }
 
 interface ModalTagsProps extends ModalWindowProps {

src/components/task.module.scss

@@ -1,5 +1,5 @@
 @reference "../index.scss";
 
 .task {
-  @apply flex h-24 w-full cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px];
+  @apply relative flex h-24 w-full cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px];
 }

src/components/task.tsx

@@ -6,6 +6,7 @@ import classes from "./task.module.scss";
 interface TaskProps {
   name: string;
   checked?: boolean;
+  overdue?: boolean;
   onClick?: () => void;
   onMarkClick?: MouseEventHandler<HTMLParagraphElement>;
 }
@@ -30,7 +31,13 @@ const markStyle = tv({
   },
 });
 
-const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {}, onMarkClick = () => {} }) => {
+const Task: FunctionComponent<TaskProps> = ({
+  name,
+  checked = false,
+  onClick = () => {},
+  onMarkClick = () => {},
+  overdue,
+}) => {
   return (
     <div class="w-[95%]">
       <div class={classes.task} onClick={onClick}>
@@ -44,6 +51,7 @@ const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = (
           <p class={markStyle({ checked })}>✓</p>
         </div>
         {name}
+        {overdue && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
       </div>
     </div>
   );

src/pages/profile_calendar.tsx

@@ -1,26 +1,25 @@
-import { withTitle } from "@/constructors/Component";
-import { UrlsTitle } from "@/enums/urls";
-import { FunctionComponent } from "preact";
-import { useState, useEffect } from "preact/hooks";
-import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
-import { cn } from "@/utils/class-merge";
-import { ITask } from "./profile_tasks.dto";
-import Task from "@/components/task";
-import ModalWindow from "@/components/ui/Modal";
 import ModalCalendar from "@/components/ModalCalendar";
 import ModalTags, { ITags } from "@/components/ModalTags";
-import { useForm } from "react-hook-form";
+import Task from "@/components/task";
-import { ITaskForm } from "./profile_tasks.dto";
+import Dialog from "@/components/ui/Dialog";
-import { Nullable } from "primereact/ts-helpers";
+import ModalWindow from "@/components/ui/Modal";
+import { withTitle } from "@/constructors/Component";
+import { UrlsTitle } from "@/enums/urls";
+import { cn } from "@/utils/class-merge";
 import {
-  PencilIcon,
-  InboxArrowDownIcon,
-  CalendarDaysIcon,
   BookOpenIcon,
+  CalendarDaysIcon,
   DocumentDuplicateIcon,
+  InboxArrowDownIcon,
+  PencilIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import Dialog from "@/components/ui/Dialog";
+import { FunctionComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
+import { Nullable } from "primereact/ts-helpers";
+import { useForm } from "react-hook-form";
+import { ITask, ITaskForm } from "./profile_tasks.dto";
 
 const example_tags: { first: string[]; second: string[] } = {
   first: ["Программирование", "Информатика", "Физика", "Математика"],
@@ -58,10 +57,9 @@ const ProfileCalendar: FunctionComponent = () => {
   const [isEditModal, setIsEditModal] = useState(false);
   const [editContent, setEditContent] = useState<ITask | null>(null);
   const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
-  const [tags, setTags] = useState<ITags>({ first: "", second: "" });
+  const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
-
   const {
     handleSubmit,
     register,
@@ -123,6 +121,15 @@ const ProfileCalendar: FunctionComponent = () => {
     setEditContent(newEditContent);
   }, [tags]);
 
+  const tasksCount = (date: CalendarDateTemplateEvent) => {
+    return tasks.filter((task) => {
+      const taskDate = task.date;
+      return (
+        taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
+      );
+    }).length;
+  };
+
   const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
     return tasks.some((task) => {
       const taskDate = task.date;
@@ -134,6 +141,7 @@ const ProfileCalendar: FunctionComponent = () => {
 
   const dateTemplate = (date: CalendarDateTemplateEvent) => {
     const isHighlighted = hasTasksOnDate(date);
+    const countT = tasksCount(date);
     const isSelected =
       currentDate &&
       currentDate.getDate() === date.day &&
@@ -143,7 +151,6 @@ const ProfileCalendar: FunctionComponent = () => {
       new Date().getDate() === date.day &&
       new Date().getMonth() === date.month &&
       new Date().getFullYear() === date.year;
-
     return (
       <div
         className={cn(
@@ -156,7 +163,14 @@ const ProfileCalendar: FunctionComponent = () => {
         )}
       >
         <span>{date.day}</span>
-        {isHighlighted && <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-pink-400" />}
+        {isHighlighted && (
+          <div class="absolute top-2 right-2 flex h-fit w-2 flex-col items-center gap-1 md:h-2 md:w-fit md:flex-row">
+            {Array.from({ length: countT > 3 ? 3 : countT }).map((_, i) => (
+              <span key={i} className="size-2 rounded-full bg-pink-400" />
+            ))}
+            {countT > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
+          </div>
+        )}
       </div>
     );
   };
@@ -192,7 +206,7 @@ const ProfileCalendar: FunctionComponent = () => {
     };
     setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
     localStorage.setItem("tasks", JSON.stringify(tasks.map((task) => (task.id === eTask.id ? eTask : task))));
-    setTags({ first: "", second: "" });
+    setTags({ first: "", second: "", overdue: false });
   };
 
   const pt = {
@@ -222,7 +236,7 @@ const ProfileCalendar: FunctionComponent = () => {
         tagsList={example_tags}
         value={tags}
         onClose={() => {
-          setTags({ first: "", second: "" });
+          setTags({ first: "", second: "", overdue: false });
         }}
         onChange={setTags}
       />
@@ -242,7 +256,7 @@ const ProfileCalendar: FunctionComponent = () => {
           setIsEdit(false);
           setEditContent(null);
           setIsEditModal(false);
-          setTags({ first: "", second: "" });
+          setTags({ first: "", second: "", overdue: false });
           setCalendarDate(null);
         }}
       >
@@ -345,7 +359,7 @@ const ProfileCalendar: FunctionComponent = () => {
                 })}
                 onClick={() => {
                   if (!isEditModal) return;
-                  setTags({ first: editContent.tags[0], second: editContent.tags[1] });
+                  setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
                   setOpenModalTags(true);
                 }}
               >

src/pages/profile_tasks.tsx

@@ -24,6 +24,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { Checkbox } from "primereact/checkbox";
 import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { v4 as uuid } from "uuid";
@@ -46,10 +47,10 @@ const ProfileTasks: FunctionComponent = () => {
   const [isCreating, setIsCreating] = useState(false); // Включено создание задачи
   const [editContent, setEditContent] = useState<ITask | null>(null); // Содержимое редактируемой задачи
   const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
-  const [tags, setTags] = useState<ITags>({ first: "", second: "" });
+  const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [searchQuery, setSearchQuery] = useState(""); // Текст поиска
-  const [filterTags, setFilterTags] = useState<ITags>({ first: "", second: "" });
+  const [filterTags, setFilterTags] = useState<ITags>({ first: "", second: "", overdue: false });
   const [openFirstList, setOpenFirstList] = useState(false);
   const [openSecondList, setOpenSecondList] = useState(false);
   const getDate = useMemo(() => {
@@ -99,7 +100,7 @@ const ProfileTasks: FunctionComponent = () => {
     if (isCreating) setTasks([...tasks, eTask]);
     else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
     if (isCreating) setIsOpen(false);
-    setTags({ first: "", second: "" });
+    setTags({ first: "", second: "", overdue: false });
   };
   useEffect(() => {
     if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
@@ -201,6 +202,7 @@ const ProfileTasks: FunctionComponent = () => {
       );
     }
 
+    filtered = filtered.filter((task) => (filterTags.overdue ? task.date < new Date() : task.date >= new Date()));
     return filtered;
   }, [tasks, searchQuery, filterTags]);
 
@@ -218,7 +220,7 @@ const ProfileTasks: FunctionComponent = () => {
         tagsList={example_tags}
         value={tags}
         onClose={() => {
-          if (!isCreating) setTags({ first: "", second: "" });
+          if (!isCreating) setTags({ first: "", second: "", overdue: false });
         }}
         onChange={setTags}
       />
@@ -241,7 +243,7 @@ const ProfileTasks: FunctionComponent = () => {
           setEditContent(null);
           setIsCreating(false);
           setIsEditModal(false);
-          setTags({ first: "", second: "" });
+          setTags({ first: "", second: "", overdue: false });
           setCalendarDate(null);
         }}
       >
@@ -344,7 +346,7 @@ const ProfileTasks: FunctionComponent = () => {
                 })}
                 onClick={() => {
                   if (!isEditModal) return;
-                  setTags({ first: editContent.tags[0], second: editContent.tags[1] });
+                  setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
                   setOpenModalTags(true);
                 }}
               >
@@ -429,7 +431,7 @@ const ProfileTasks: FunctionComponent = () => {
         confirmText="Удалить"
         cancelText="Отмена"
       />
-      {!searchQuery && !filterTags.first && !filterTags.second ? (
+      {!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
         filteredTasks.length > 0 ? (
           <>
             <div class={classes.header}>
@@ -467,6 +469,7 @@ const ProfileTasks: FunctionComponent = () => {
                       name={task.name}
                       key={task.id}
                       checked={task.checked}
+                      overdue={task.date < new Date()}
                       onClick={() => {
                         setIsOpen(true);
                         setIsEdit(true);
@@ -564,6 +567,7 @@ const ProfileTasks: FunctionComponent = () => {
                 name={task.name}
                 key={task.id}
                 checked={task.checked}
+                overdue={task.date < new Date()}
                 onClick={() => {
                   setIsOpen(true);
                   setIsEdit(true);
@@ -645,6 +649,44 @@ const ProfileTasks: FunctionComponent = () => {
           <div class="flex flex-col gap-4">
             <div class="text-center text-lg font-semibold">Фильтры</div>
             <div class="flex flex-col gap-2">
+              <div class="flex flex-row gap-2">
+                <Checkbox
+                  name="overdue"
+                  checked={filterTags.overdue}
+                  onChange={(e) => {
+                    setFilterTags({ ...filterTags, overdue: e.target.checked! });
+                  }}
+                  pt={{
+                    root: {
+                      className: cn("cursor-pointer inline-flex relative select-none align-bottom", "w-6 h-6"),
+                    },
+                    input: {
+                      className: cn(
+                        "absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"
+                      ),
+                    },
+                    box: ({ props, context }) => ({
+                      className: cn(
+                        "flex items-center justify-center",
+                        "border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
+                        {
+                          "border-gray-300 bg-white": !context.checked,
+                          "border-blue-500 bg-blue-500": context.checked,
+                        },
+                        {
+                          "hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]":
+                            !props.disabled,
+                          "cursor-default opacity-60": props.disabled,
+                        }
+                      ),
+                    }),
+                    icon: "w-4 h-4 transition-all duration-200 text-white text-base",
+                  }}
+                ></Checkbox>
+                <label htmlFor="overdue" class="cursor-pointer">
+                  Просроченные
+                </label>
+              </div>
               <div class="relative">
                 <div
                   class={cn(
@@ -729,11 +771,11 @@ const ProfileTasks: FunctionComponent = () => {
                 )}
               </div>
 
-              {(filterTags.first || filterTags.second) && (
+              {(filterTags.first || filterTags.second || filterTags.overdue) && (
                 <button
                   class="mt-2 w-full rounded-lg bg-red-100 px-4 py-2 text-red-600 hover:bg-red-200"
                   onClick={() => {
-                    setFilterTags({ first: "", second: "" });
+                    setFilterTags({ first: "", second: "", overdue: false });
                     setOpenFirstList(false);
                     setOpenSecondList(false);
                   }}