feat: status-system

bun.lock

@@ -8,6 +8,7 @@
         "@preact/signals": "^2.0.2",
         "@tailwindcss/postcss": "^4.0.17",
         "@tailwindcss/vite": "^4.0.17",
+        "@types/uuid": "^10.0.0",
         "clsx": "^2.1.1",
         "postcss": "^8.5.3",
         "preact": "^10.26.2",
@@ -18,6 +19,7 @@
         "tailwind-merge": "^3.0.2",
         "tailwind-variants": "^1.0.0",
         "tailwindcss": "^4.0.17",
+        "uuid": "^11.1.0",
       },
       "devDependencies": {
         "@eslint/js": "^9.23.0",
@@ -281,6 +283,8 @@
 
     "@types/react-transition-group": ["@types/react-transition-group@4.4.12", "", { "peerDependencies": { "@types/react": "*" } }, "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w=="],
 
+    "@types/uuid": ["@types/uuid@10.0.0", "", {}, "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ=="],
+
     "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.28.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.28.0", "@typescript-eslint/type-utils": "8.28.0", "@typescript-eslint/utils": "8.28.0", "@typescript-eslint/visitor-keys": "8.28.0", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-lvFK3TCGAHsItNdWZ/1FkvpzCxTHUVuFrdnOGLMa0GGCFIbCgQWVk3CzCGdA7kM3qGVc+dfW9tr0Z/sHnGDFyg=="],
 
     "@typescript-eslint/parser": ["@typescript-eslint/parser@8.28.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.28.0", "@typescript-eslint/types": "8.28.0", "@typescript-eslint/typescript-estree": "8.28.0", "@typescript-eslint/visitor-keys": "8.28.0", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ=="],
@@ -735,6 +739,8 @@
 
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
 
+    "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
+
     "varint": ["varint@6.0.0", "", {}, "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg=="],
 
     "vite": ["vite@6.2.3", "", { "dependencies": { "esbuild": "^0.25.0", "postcss": "^8.5.3", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg=="],

package.json

@@ -13,6 +13,7 @@
     "@preact/signals": "^2.0.2",
     "@tailwindcss/postcss": "^4.0.17",
     "@tailwindcss/vite": "^4.0.17",
+    "@types/uuid": "^10.0.0",
     "clsx": "^2.1.1",
     "postcss": "^8.5.3",
     "preact": "^10.26.2",
@@ -22,7 +23,8 @@
     "react-hook-form": "^7.56.1",
     "tailwind-merge": "^3.0.2",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.0.17"
+    "tailwindcss": "^4.0.17",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.23.0",

src/app.tsx

@@ -1,6 +1,5 @@
 import { FunctionComponent } from "preact";
 import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
-import "preact/debug";
 import { ru } from "primelocale/js/ru.js";
 import { addLocale, locale, PrimeReactProvider } from "primereact/api";
 import { useMountEffect } from "primereact/hooks";
@@ -26,8 +25,6 @@ export function App() {
       <PrimeReactProvider
         value={{
           unstyled: true,
-          // pt: Tailwind,
-          // ptOptions: { mergeProps: true, mergeSections: true, classNameMergeFunction: cn },
         }}
       >
         <LocationProvider>

src/components/ModalCalendar.tsx

@@ -199,4 +199,6 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
   );
 };
 
+ModalCalendar.displayName = "AHModalCalendar";
+
 export default ModalCalendar;

src/components/ModalTags.tsx

@@ -0,0 +1,125 @@
+import { cn } from "@/utils/class-merge";
+import { BookOpenIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { FunctionComponent } from "preact";
+import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
+import Button from "./ui/Button";
+import ModalWindow from "./ui/Modal";
+
+export interface ITags {
+  first: string;
+  second: string;
+}
+
+interface ModalTagsProps {
+  isOpen?: boolean;
+  setIsOpen?: Dispatch<StateUpdater<boolean>>;
+  onClose?: () => void;
+  value?: ITags;
+  onChange?: Dispatch<StateUpdater<ITags>>;
+  tagsList?: {
+    first: string[];
+    second: string[];
+  };
+}
+
+const ModalTags: FunctionComponent<ModalTagsProps> = ({ isOpen, setIsOpen, onClose, onChange, value, tagsList }) => {
+  const [showFirstTags, setShowFirstTags] = useState(false);
+  const [showSecondTags, setShowSecondTags] = useState(false);
+  useEffect(() => {
+    if (showFirstTags && showSecondTags) setShowFirstTags(false);
+  }, [showSecondTags]);
+  useEffect(() => {
+    if (showFirstTags && showSecondTags) setShowSecondTags(false);
+  }, [showFirstTags]);
+  return (
+    <ModalWindow
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      onClose={() => {
+        onClose!();
+        setShowFirstTags(false);
+        setShowSecondTags(false);
+      }}
+      className="relative h-[14rem] justify-between py-4 md:h-[14rem] md:w-[25rem]"
+      zIndex={70}
+    >
+      <p class="text-2xl font-semibold">Теги</p>
+      <div class="flex w-[85%] flex-col gap-2 md:w-full">
+        <Button
+          className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]!"
+          onClick={() => setShowFirstTags(!showFirstTags)}
+        >
+          <BookOpenIcon class="size-6" />
+          {value?.first || "Предмет"}
+        </Button>
+        <Button
+          className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]! break-words"
+          onClick={() => setShowSecondTags(!showSecondTags)}
+        >
+          <DocumentDuplicateIcon class="size-6" />
+          {value?.second || "Тема"}
+        </Button>
+        {showFirstTags && (
+          <div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center rounded-[4rem] bg-white px-8 py-4 text-xs md:top-0 md:left-full md:mt-0 md:ml-5">
+            <div class="flex h-fit max-h-[45vh] w-full flex-col gap-3 overflow-y-auto">
+              {tagsList?.first.map((tag) => (
+                <div
+                  class="flex cursor-pointer flex-row gap-2"
+                  onClick={() =>
+                    onChange?.((prev) => {
+                      return { ...prev, first: tag };
+                    })
+                  }
+                >
+                  <div
+                    class={cn(
+                      "pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
+                      {
+                        "bg-black": value?.first === tag,
+                      }
+                    )}
+                  >
+                    ✓
+                  </div>
+                  <p>{tag}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {showSecondTags && (
+          <div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center rounded-[4rem] bg-white px-8 py-4 text-xs md:top-0 md:left-full md:mt-0 md:ml-5">
+            <div class="flex h-fit max-h-[45vh] w-full flex-col gap-3 overflow-y-auto">
+              {tagsList?.second.map((tag) => (
+                <div
+                  class="flex cursor-pointer flex-row gap-2"
+                  onClick={() =>
+                    onChange?.((prev) => {
+                      return { ...prev, second: tag };
+                    })
+                  }
+                >
+                  <div
+                    class={cn(
+                      "pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
+                      {
+                        "bg-black": value?.second === tag,
+                      }
+                    )}
+                  >
+                    ✓
+                  </div>
+                  <p>{tag}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </ModalWindow>
+  );
+};
+
+ModalTags.displayName = "AHModalTags";
+
+export default ModalTags;

src/components/calendar.tsx

@@ -220,6 +220,9 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
 
   return (
     <div className={`flex w-full flex-col ${className}`}>
+      <div class="fixed top-0 right-[20rem] z-100 flex h-full w-full flex-col items-center justify-center bg-white">
+        Закрыто
+      </div>
       <div className="mb-4 flex items-center justify-between px-2">
         <button
           onClick={handlePrevMonth}

src/components/menu.tsx

@@ -4,6 +4,8 @@ import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
+import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
+import { useEffect, useState } from "preact/hooks";
 
 interface MenuItemProps {
   title: string;
@@ -34,9 +36,33 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuI
   );
 };
 
+
 const Avatar: FunctionComponent = () => {
+  const [status, setStatus] = useState("");
   const { route, path } = useLocation();
-  //TODO: Move styles to scss module
+
+  useEffect(() => {
+    const updateStatus = () => {
+      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+      const points = calculatePoints(completedTasks);
+      setStatus(getCurrentStatus(points));
+    };
+
+    // Initial update
+    updateStatus();
+
+    // Update when tasks change
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === "tasks") {
+        updateStatus();
+      }
+    };
+    
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
   return (
     <button
       onClick={() => route("/profile/settings")}
@@ -52,7 +78,7 @@ const Avatar: FunctionComponent = () => {
         <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
         <div class="flex flex-col items-center justify-center">
           <p class="text-3xl font-semibold">никнейм</p>
-          <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">статус</div>
+          <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
         </div>
       </div>
     </button>

src/components/task.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from "preact";
+import { MouseEventHandler } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./task.module.scss";
 
@@ -6,10 +7,11 @@ interface TaskProps {
   name: string;
   checked?: boolean;
   onClick?: () => void;
+  onMarkClick?: MouseEventHandler<HTMLParagraphElement>;
 }
 
 const taskStyle = tv({
-  base: "flex aspect-square h-full flex-col items-center justify-center rounded-full border",
+  base: "hover:scale-[1.1]active:scale-[1.1] flex aspect-square h-full flex-col items-center justify-center rounded-full border transition-[scale] duration-100 ease-in-out select-none",
   variants: {
     checked: {
       true: "bg-black",
@@ -28,18 +30,25 @@ const markStyle = tv({
   },
 });
 
-const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {} }: TaskProps) => {
+const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {}, onMarkClick = () => {} }) => {
   return (
-    // Временное действие для тестирования
+    <div class="w-[95%]">
-    <button onClick={onClick} class="w-[95%]">
+      <div class={classes.task} onClick={onClick}>
-      <div class={classes.task}>
+        <div
-        <div class={taskStyle({ checked })}>
+          class={taskStyle({ checked })}
+          onClick={(e) => {
+            e.stopPropagation();
+            onMarkClick(e);
+          }}
+        >
           <p class={markStyle({ checked })}>✓</p>
         </div>
         {name}
       </div>
-    </button>
+    </div>
   );
 };
 
+Task.displayName = "AHTask";
+
 export default Task;

src/components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "preact";
+import { forwardRef, HTMLProps } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./Button.module.scss";
 const button = tv({
@@ -12,25 +12,20 @@ const button = tv({
   },
 });
 
-interface ButtonProps {
+interface ButtonProps extends HTMLProps<HTMLButtonElement> {
   color?: "primary" | "secondary" | "red";
-  onClick?: () => void;
   className?: string;
-  type?: "button" | "submit";
 }
 
-const Button: FunctionComponent<ButtonProps> = ({
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  children,
+  const { children, onClick = () => {}, color = "primary", className = "", type = "button" } = props;
-  onClick = () => {},
-  color = "primary",
-  className = "",
-  type = "button",
-}) => {
   return (
-    <button type={type} class={button({ color: color, class: className })} onClick={onClick}>
+    <button ref={ref} type={type} class={button({ color: color, class: className })} onClick={onClick}>
       {children}
     </button>
   );
-};
+});
+
+Button.displayName = "AHButton";
 
 export default Button;

src/components/ui/Dialog.tsx

@@ -0,0 +1,52 @@
+import { FunctionComponent } from "preact";
+import Button from "./Button";
+
+interface DialogProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  title: string;
+  content: string;
+  onConfirm: () => void;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+const Dialog: FunctionComponent<DialogProps> = ({
+  isOpen,
+  setIsOpen,
+  title,
+  content,
+  onConfirm,
+  confirmText = "Подтвердить",
+  cancelText = "Отмена",
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div class="w-full max-w-md rounded-[4rem] bg-white p-6 shadow-lg">
+        <h2 class="mb-4 text-xl font-semibold">{title}</h2>
+        <p class="mb-6">{content}</p>
+        <div class="flex justify-end gap-4">
+          <Button
+            onClick={() => setIsOpen(false)}
+            className="bg-gray-200 text-gray-800 hover:bg-gray-300"
+          >
+            {cancelText}
+          </Button>
+          <Button
+            onClick={() => {
+              onConfirm();
+              setIsOpen(false);
+            }}
+            color="red"
+          >
+            {confirmText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dialog; 

src/index.scss

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 :root {
+  color: black;
+  background-color: white;
   font-family: "Montserrat", sans-serif;
 }
 

src/pages/login.tsx

@@ -6,7 +6,6 @@ import { useAppContext } from "@/providers/AuthProvider";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import "preact/debug";
-import { useState } from "preact/hooks";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { ILoginForm } from "./login.dto";
 import classes from "./login.module.scss";
@@ -18,17 +17,6 @@ const testUser = {
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  const [passwordError, setPasswordError] = useState("");
-  const login: SubmitHandler<ILoginForm> = async (data) => {
-    console.log(data);
-    if (data.login !== testUser.login || data.password !== testUser.password) {
-      setError("login", { message: "Неверный" }); //TODO: не показывает ошибку
-      return;
-    }
-    isLoggedIn.value = true;
-    localStorage.setItem("loggedIn", "true");
-    route("/profile/tasks", true);
-  };
   const { control, handleSubmit, formState, setError } = useForm({
     defaultValues: {
       login: "",
@@ -36,12 +24,23 @@ const LoginPage: FunctionComponent = () => {
     },
     mode: "onChange",
   });
+  const login: SubmitHandler<ILoginForm> = async (data) => {
+    console.log(data);
+    if (data.login !== testUser.login || data.password !== testUser.password) {
+      setError("login", { message: "Неверный логин или пароль" });
+      setError("password", { message: "Неверный логин или пароль" });
+      return;
+    }
+    isLoggedIn.value = true;
+    localStorage.setItem("loggedIn", "true");
+    route("/profile/tasks", true);
+  };
   if (isLoggedIn.value) route("/profile/tasks", true);
   return !isLoggedIn.value ? (
     <div class={classes.login_container}>
       <div class={classes.login_card}>
         <p class={classes.login_card_name}>Антихвост</p>
-        <form onSubmit={handleSubmit((data) => login(data))}>
+        <form onSubmit={handleSubmit(login)}>
           <Controller
             name="login"
             control={control}
@@ -59,7 +58,13 @@ const LoginPage: FunctionComponent = () => {
               required: "Введите пароль",
             }}
             render={({ field }) => (
-              <Input placeholder="Пароль" textAlign="center" type="password" error={passwordError} {...field} />
+              <Input
+                placeholder="Пароль"
+                textAlign="center"
+                type="password"
+                error={formState.errors.password?.message}
+                {...field}
+              />
             )}
           />
           <Button type="submit" color="secondary" className="w-full">

src/pages/profile_calendar.tsx

@@ -1,15 +1,408 @@
-import BigCalendar from "@/components/calendar";
 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 { ITaskForm } from "./profile_tasks.dto";
+import { Nullable } from "primereact/ts-helpers";
+import {
+  PencilIcon,
+  InboxArrowDownIcon,
+  CalendarDaysIcon,
+  BookOpenIcon,
+  DocumentDuplicateIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import Dialog from "@/components/ui/Dialog";
+
+const example_tags: { first: string[]; second: string[] } = {
+  first: ["Программирование", "Информатика", "Физика", "Математика"],
+  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
+};
+
+const calendarStyles = {
+  root: "inline-flex w-full relative",
+  input: "font-sans text-base text-gray-600 bg-white p-3",
+  panel: "bg-white min-w-full p-2",
+  header: "flex items-center justify-between p-2 text-gray-700 font-semibold m-0 mb-4",
+  title: "leading-8 mx-auto text-xl",
+  previousButton: "flex items-center justify-center cursor-pointer w-8 h-8 text-gray-600",
+  nextButton: "flex items-center justify-center cursor-pointer w-8 h-8 text-gray-600",
+  table: "border-collapse w-full",
+  tableHeaderCell: "p-2 text-center",
+  weekDay: "text-gray-600 font-normal pb-4",
+  monthTitle: "text-gray-700 font-semibold mr-2",
+  yearTitle: "text-gray-700 font-semibold",
+  monthPicker: "grid grid-cols-3 gap-2",
+  yearPicker: "grid grid-cols-2 gap-2",
+  month:
+    "p-2 text-center cursor-pointer rounded-lg hover:bg-[rgba(251,194,199,0.1)] [&.p-highlight]:bg-[rgba(251,194,199,0.2)]",
+  year: "p-2 text-center cursor-pointer rounded-lg hover:bg-[rgba(251,194,199,0.1)] [&.p-highlight]:bg-[rgba(251,194,199,0.2)]",
+};
 
 const ProfileCalendar: FunctionComponent = () => {
-  const onDateSelect = (date: Date) => {
+  const [currentDate, setCurrentDate] = useState(new Date());
-    console.log(date);
+  const [tasks, setTasks] = useState<ITask[]>([]);
+  const [selectedTasks, setSelectedTasks] = useState<ITask[]>([]);
+  const [openModal, setIsOpen] = useState(false);
+  const [openModalCalendar, setOpenModalCalendar] = useState(false);
+  const [openModalTags, setOpenModalTags] = useState(false);
+  const [isEdit, setIsEdit] = useState(false);
+  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 [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+
+  const {
+    handleSubmit,
+    register,
+    reset,
+    setError,
+    formState: { errors },
+  } = useForm<ITaskForm>({
+    defaultValues: {
+      tags: [],
+    },
+  });
+
+  useEffect(() => {
+    const storedTasks = localStorage.getItem("tasks");
+    if (storedTasks) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const parsedTasks: ITask[] = JSON.parse(storedTasks).map((task: any) => ({
+        ...task,
+        date: new Date(task.date),
+      }));
+      setTasks(parsedTasks);
+    }
+  }, []);
+  const handleDeleteTask = () => {
+    if (!editContent) return;
+    setTasks(tasks.filter((task) => task.id !== editContent.id));
+    setIsOpen(false);
+    setShowDeleteDialog(false);
   };
+
+  useEffect(() => {
+    if (!currentDate) return;
+
+    const tasksForDate = tasks.filter((task) => {
+      const taskDate = task.date;
+      return (
+        taskDate.getDate() === currentDate.getDate() &&
+        taskDate.getMonth() === currentDate.getMonth() &&
+        taskDate.getFullYear() === currentDate.getFullYear()
+      );
+    });
+
+    setSelectedTasks(tasksForDate);
+  }, [currentDate, tasks]);
+
+  useEffect(() => {
+    if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
+    else reset();
+  }, [editContent]);
+  useEffect(() => {
+    localStorage.setItem("tasks", JSON.stringify(tasks));
+  }, [tasks]);
+
+  useEffect(() => {
+    if (!editContent) return;
+    const newEditContent = editContent;
+    if (tags.first) newEditContent.tags = [tags.first, newEditContent.tags[1]];
+    if (tags.second) newEditContent.tags = [newEditContent.tags[0], tags.second];
+    setEditContent(newEditContent);
+  }, [tags]);
+
+  const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
+    return tasks.some((task) => {
+      const taskDate = task.date;
+      return (
+        taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
+      );
+    });
+  };
+
+  const dateTemplate = (date: CalendarDateTemplateEvent) => {
+    const isHighlighted = hasTasksOnDate(date);
+    const isSelected =
+      currentDate &&
+      currentDate.getDate() === date.day &&
+      currentDate.getMonth() === date.month &&
+      currentDate.getFullYear() === date.year;
+    const isToday =
+      new Date().getDate() === date.day &&
+      new Date().getMonth() === date.month &&
+      new Date().getFullYear() === date.year;
+
+    return (
+      <div
+        className={cn(
+          "relative flex h-20 w-full cursor-pointer items-start justify-start rounded-lg p-2",
+          "hover:bg-[rgba(251,194,199,0.1)]",
+          {
+            "bg-[rgba(251,194,199,0.4)]": isSelected,
+            "bg-[rgba(251,194,199,0.2)]": isToday && !isSelected,
+          }
+        )}
+      >
+        <span>{date.day}</span>
+        {isHighlighted && <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-pink-400" />}
+      </div>
+    );
+  };
+
+  const handleTaskCheck = (taskId: string) => {
+    const updatedTasks = tasks.map((task) => (task.id === taskId ? { ...task, checked: !task.checked } : task));
+    setTasks(updatedTasks);
+    localStorage.setItem("tasks", JSON.stringify(updatedTasks));
+  };
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("ru-RU", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    }).format(date);
+  };
+
+  const saveTask = (data: ITaskForm) => {
+    if (!calendarDate) {
+      setError("date", { message: "Выберите дату" });
+      return;
+    }
+    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
+      setError("tags", { message: "Выберите теги" });
+      return;
+    }
+    const eTask: ITask = {
+      ...data,
+      date: calendarDate,
+      tags: editContent?.tags.length ? editContent.tags : [tags.first, tags.second],
+      new: true,
+    };
+    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: "" });
+  };
+
+  const pt = {
+    root: { className: calendarStyles.root },
+    input: { root: { className: calendarStyles.input } },
+    panel: { className: calendarStyles.panel },
+    header: { className: calendarStyles.header },
+    title: { className: calendarStyles.title },
+    previousButton: { className: calendarStyles.previousButton },
+    nextButton: { className: calendarStyles.nextButton },
+    table: { className: calendarStyles.table },
+    tableHeaderCell: { className: calendarStyles.tableHeaderCell },
+    weekDay: { className: calendarStyles.weekDay },
+    monthTitle: { className: calendarStyles.monthTitle },
+    yearTitle: { className: calendarStyles.yearTitle },
+    monthPicker: { className: calendarStyles.monthPicker },
+    yearPicker: { className: calendarStyles.yearPicker },
+    month: { className: calendarStyles.month },
+    year: { className: calendarStyles.year },
+  };
+
   return (
     <div class="flex w-full flex-col items-center">
-      <BigCalendar onDateSelect={onDateSelect} />
+      <ModalTags
+        isOpen={openModalTags}
+        setIsOpen={setOpenModalTags}
+        tagsList={example_tags}
+        value={tags}
+        onClose={() => {
+          setTags({ first: "", second: "" });
+        }}
+        onChange={setTags}
+      />
+      <ModalCalendar
+        isOpen={openModalCalendar}
+        setIsOpen={setOpenModalCalendar}
+        onClose={() => {
+          if (isEdit && !isEditModal) setCalendarDate(null);
+        }}
+        onChange={(e) => isEditModal && setCalendarDate(e.value)}
+        value={calendarDate!}
+      />
+      <ModalWindow
+        isOpen={openModal}
+        setIsOpen={setIsOpen}
+        onClose={() => {
+          setIsEdit(false);
+          setEditContent(null);
+          setIsEditModal(false);
+          setTags({ first: "", second: "" });
+          setCalendarDate(null);
+        }}
+      >
+        {isEdit && editContent && (
+          <form
+            class="flex h-full w-full flex-col items-start justify-between"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isEditModal) handleSubmit(saveTask)();
+              else setIsEditModal(!isEditModal);
+            }}
+          >
+            <div class="flex w-full flex-row items-start justify-between">
+              <div class="flex flex-1 flex-col gap-1 pe-2">
+                <input
+                  class="w-full text-2xl outline-0"
+                  disabled={!isEditModal}
+                  placeholder="Название"
+                  {...register("name", {
+                    required: "Заполните название",
+                    maxLength: { value: 20, message: "Максимум 20 символов в названии" },
+                  })}
+                />
+                <textarea
+                  class="h-[5rem] w-full resize-none outline-0"
+                  disabled={!isEditModal}
+                  placeholder={isEditModal ? "Описание" : ""}
+                  {...register("description", {
+                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
+                  })}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" hidden {...register("checked")} />
+              </div>
+              <div class="flex flex-row gap-4">
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => {
+                    if (isEditModal) {
+                      handleSubmit(saveTask)();
+                      setIsEditModal(!isEditModal);
+                    } else setIsEditModal(!isEditModal);
+                  }}
+                >
+                  {isEditModal ? (
+                    <>
+                      <InboxArrowDownIcon class="size-6" />
+                      <p class="text-[0.7rem]">Сохранить</p>
+                    </>
+                  ) : (
+                    <>
+                      <PencilIcon class="size-6" />
+                      <p class="text-[0.7rem]">Редактировать</p>
+                    </>
+                  )}
+                </div>
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => setShowDeleteDialog(true)}
+                >
+                  <TrashIcon class="size-6" />
+                  <p class="text-[0.7rem]">Удалить</p>
+                </div>
+              </div>
+            </div>
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.description && <p class="text-red-500">{errors.description.message}</p>}
+            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+            {errors.tags && <p class="text-red-500">{errors.tags.message}</p>}
+            <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
+              <div
+                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setOpenModalCalendar(true);
+                  setCalendarDate(editContent.date);
+                }}
+              >
+                <CalendarDaysIcon class="size-10" />
+                <p>
+                  {Intl.DateTimeFormat("ru-RU", {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  }).format(calendarDate!)}
+                </p>
+              </div>
+              <div
+                class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setTags({ first: editContent.tags[0], second: editContent.tags[1] });
+                  setOpenModalTags(true);
+                }}
+              >
+                <p class="flex flex-row gap-2">
+                  <BookOpenIcon class="size-5" />
+                  {editContent.tags[0]}
+                </p>
+                <p class="flex flex-row gap-2">
+                  <DocumentDuplicateIcon class="size-5" />
+                  {editContent.tags[1]}
+                </p>
+              </div>
+            </div>
+          </form>
+        )}
+      </ModalWindow>
+      <Dialog
+        isOpen={showDeleteDialog}
+        setIsOpen={setShowDeleteDialog}
+        title="Удаление задачи"
+        content="Вы уверены, что хотите удалить эту задачу?"
+        onConfirm={handleDeleteTask}
+        confirmText="Удалить"
+        cancelText="Отмена"
+      />
+      <Calendar
+        value={currentDate}
+        onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
+        inline
+        pt={pt}
+        dateTemplate={dateTemplate}
+        className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
+      />
+
+      <div class="mt-8 w-full px-4">
+        <h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
+        {selectedTasks.length > 0 ? (
+          <div class="flex flex-col gap-4">
+            {selectedTasks.map((task) => (
+              <Task
+                key={task.id}
+                name={task.name}
+                checked={task.checked}
+                onClick={() => {
+                  setIsOpen(true);
+                  setIsEdit(true);
+                  setEditContent(task);
+                  setCalendarDate(task.date);
+                }}
+                onMarkClick={() => handleTaskCheck(task.id)}
+              />
+            ))}
+          </div>
+        ) : (
+          <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
+        )}
+      </div>
     </div>
   );
 };

src/pages/profile_settings.tsx

@@ -3,22 +3,47 @@ import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import { cn } from "@/utils/class-merge";
+import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import classes from "./profile_settings.module.scss";
 
 const ProfileSettings: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  const status = 12;
+  const [status, setStatus] = useState(0);
   const maxStatus = 100;
+
+  useEffect(() => {
+    const updateStatus = () => {
+      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+      const points = calculatePoints(completedTasks);
+      setStatus(points);
+    };
+
+    // Initial update
+    updateStatus();
+
+    // Update when tasks change
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === "tasks") {
+        updateStatus();
+      }
+    };
+    
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
   return (
     <div class={classes.container}>
       <div class="flex w-full flex-col items-center rounded-[4rem] bg-[linear-gradient(180.00deg,rgb(251,194,199),rgba(206,232,251,0.72)_100%)] px-7 py-5 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:flex-row">
         <div id={classes.avatar}>Аватар</div>
         <div class={classes.header_block__name}>
           <p class="text-4xl font-semibold">Никнейм</p>
-          <p class="text-2xl font-light">Статус</p>
+          <p class="text-2xl font-light">{getCurrentStatus(status)}</p>
           <div class="h-1.5 w-full overflow-hidden rounded-2xl bg-white">
             <div
               class={cn("relative top-0 left-0 h-2 bg-black")}

src/pages/profile_tasks.dto.ts

@@ -1,8 +1,13 @@
 export interface ITask {
-  id: number;
+  id: string;
   name: string;
   checked: boolean;
   date: Date;
   description: string;
   tags: string[];
+  new?: boolean;
+}
+
+export interface ITaskForm extends Omit<ITask, "date"> {
+  date: string;
 }

src/pages/profile_tasks.tsx

@@ -1,10 +1,12 @@
 import Task from "@/components/task";
 
 import ModalCalendar from "@/components/ModalCalendar";
+import ModalTags, { ITags } from "@/components/ModalTags";
 import Button from "@/components/ui/Button";
 import ModalWindow from "@/components/ui/Modal";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
+import { cn } from "@/utils/class-merge";
 import { PlusIcon } from "@heroicons/react/20/solid";
 import {
   BookmarkIcon,
@@ -12,75 +14,185 @@ import {
   CalendarDaysIcon,
   DocumentDuplicateIcon,
   FunnelIcon,
+  InboxArrowDownIcon,
   MagnifyingGlassIcon,
   PencilIcon,
+  TrashIcon,
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { Nullable } from "primereact/ts-helpers";
-import { ITask } from "./profile_tasks.dto";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { v4 as uuid } from "uuid";
+import { ITask, ITaskForm } from "./profile_tasks.dto";
 import classes from "./profile_tasks.module.scss";
+import Dialog from "@/components/ui/Dialog";
 
-const example_tasks: ITask[] = [
+const example_tags: { first: string[]; second: string[] } = {
-  {
+  first: ["Программирование", "Информатика", "Физика", "Математика"],
-    checked: false,
+  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
-    date: new Date(),
+};
-    description: "test",
-    id: 1,
-    name: "test1",
-    tags: ["Программирование", "Лабораторная работа"],
-  },
-  {
-    checked: true,
-    date: new Date(2025, 6, 2),
-    description: "test2",
-    id: 3,
-    name: "test3",
-    tags: ["Информатика", "Практическая работа"],
-  },
-  {
-    checked: false,
-    date: new Date(2025, 5, 1),
-    description: "test3",
-    id: 2,
-    name: "test2",
-    tags: ["Математика", "Домашнее задание"],
-  },
-];
 
 const ProfileTasks: FunctionComponent = () => {
+  const [openModal, setIsOpen] = useState(false); // Открыта модалка
+  const [openModalCalendar, setOpenModalCalendar] = useState(false); // Открыта модалка календаря
+  const [openModalTags, setOpenModalTags] = useState(false); // Открыта модалка тегов
+  const [isEdit, setIsEdit] = useState(false); // Открыта задача
+  const [isEditModal, setIsEditModal] = useState(false); // Включено редактирование задачи
+  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 [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const getDate = useMemo(() => {
     const date = new Date();
     const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
     return formatter.format(date);
   }, []);
-  const init_tasks: ITask[] = localStorage.getItem("tasks")
+  const init_tasks: ITask[] = localStorage.getItem("tasks") ? JSON.parse(localStorage.getItem("tasks") as string) : [];
-    ? JSON.parse(localStorage.getItem("tasks") as string)
+  let clear = false;
-    : example_tasks;
   init_tasks.forEach((task) => {
+    clear = clear || (task.new == undefined ? true : false);
+    if (!clear) task.new = true;
     task.date = new Date(task.date);
   });
-  const [tasks, setTasks] = useState<ITask[]>(init_tasks);
+  const [tasks, setTasks] = useState<ITask[]>(clear ? [] : init_tasks);
   useEffect(() => {
     localStorage.setItem("tasks", JSON.stringify(tasks));
   }, [tasks]);
-  const [openModal, setIsOpen] = useState(false);
+
-  const [openModalCalendar, setOpenModalCalendar] = useState(false);
+  const {
-  const [isEdit, setIsEdit] = useState(false);
+    handleSubmit,
-  const [isCreating, setIsCreating] = useState(false);
+    register,
-  const [editContent, setEditContent] = useState<ITask | null>(null);
+    reset,
-  const taskNameRef = useRef<HTMLInputElement>(null);
+    setError,
-  const taskDescriptionRef = useRef<HTMLTextAreaElement>(null);
+    formState: { errors },
-  const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
+  } = useForm<ITaskForm>({
+    defaultValues: {
+      tags: [],
+    },
+  });
+  const saveTask: SubmitHandler<ITaskForm> = (data) => {
+    if (!calendarDate) {
+      setError("date", { message: "Выберите дату" });
+      return;
+    }
+    console.log(tags);
+    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
+      setError("tags", { message: "Выберите теги" });
+      return;
+    }
+    const eTask: ITask = {
+      ...data,
+      date: calendarDate,
+      tags: editContent?.tags.length ? editContent.tags : [tags.first, tags.second],
+      new: true,
+    };
+    if (isCreating) setTasks([...tasks, eTask]);
+    else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
+    if (isCreating) setIsOpen(false);
+    setTags({ first: "", second: "" });
+  };
+  useEffect(() => {
+    if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
+    else reset();
+  }, [editContent]);
+  useEffect(() => {
+    reset({
+      name: "",
+      description: "",
+      date: "",
+      tags: [],
+      checked: false,
+    });
+  }, [isCreating]);
+  useEffect(() => {
+    if (!editContent) return;
+    const newEditContent = editContent;
+    if (tags.first) newEditContent.tags = [tags.first, newEditContent.tags[1]];
+    if (tags.second) newEditContent.tags = [newEditContent.tags[0], tags.second];
+    setEditContent(newEditContent);
+  }, [tags]);
+
+  const groupTasksByDate = useMemo(() => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    
+    const tomorrow = new Date(today);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    
+    const groupedTasks = {
+      today: [] as ITask[],
+      tomorrow: [] as ITask[],
+      future: [] as { date: Date; tasks: ITask[] }[],
+    };
+
+    tasks.forEach(task => {
+      const taskDate = new Date(task.date);
+      taskDate.setHours(0, 0, 0, 0);
+      
+      if (taskDate.getTime() === today.getTime()) {
+        groupedTasks.today.push(task);
+      } else if (taskDate.getTime() === tomorrow.getTime()) {
+        groupedTasks.tomorrow.push(task);
+      } else if (taskDate > tomorrow) {
+        const existingGroup = groupedTasks.future.find(group => 
+          group.date.getTime() === taskDate.getTime()
+        );
+        
+        if (existingGroup) {
+          existingGroup.tasks.push(task);
+        } else {
+          groupedTasks.future.push({ date: taskDate, tasks: [task] });
+        }
+      }
+    });
+
+    // Sort tasks within each group
+    groupedTasks.today.sort((a, b) => a.date.getTime() - b.date.getTime());
+    groupedTasks.tomorrow.sort((a, b) => a.date.getTime() - b.date.getTime());
+    groupedTasks.future.sort((a, b) => a.date.getTime() - b.date.getTime());
+    groupedTasks.future.forEach(group => {
+      group.tasks.sort((a, b) => a.date.getTime() - b.date.getTime());
+    });
+
+    return groupedTasks;
+  }, [tasks]);
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("ru-RU", {
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    }).format(date);
+  };
+
+  const handleDeleteTask = () => {
+    if (!editContent) return;
+    setTasks(tasks.filter((task) => task.id !== editContent.id));
+    setIsOpen(false);
+    setShowDeleteDialog(false);
+  };
+
   return (
     <div class={classes.container}>
+      <ModalTags
+        isOpen={openModalTags}
+        setIsOpen={setOpenModalTags}
+        tagsList={example_tags}
+        value={tags}
+        onClose={() => {
+          if (!isCreating) setTags({ first: "", second: "" });
+        }}
+        onChange={setTags}
+      />
       <ModalCalendar
         isOpen={openModalCalendar}
         setIsOpen={setOpenModalCalendar}
         onClose={() => {
-          if (isEdit) setCalendarDate(null);
+          if (isEdit && !isEditModal) setCalendarDate(null);
         }}
-        onChange={(e) => isCreating && setCalendarDate(e.value)}
+        onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
         value={calendarDate!}
       />
       <ModalWindow
@@ -90,25 +202,89 @@ const ProfileTasks: FunctionComponent = () => {
           setIsEdit(false);
           setEditContent(null);
           setIsCreating(false);
+          setIsEditModal(false);
+          setTags({ first: "", second: "" });
           setCalendarDate(null);
         }}
       >
         {isEdit && editContent && (
-          <div class="flex h-full w-full flex-col items-start justify-between">
+          <form
+            class="flex h-full w-full flex-col items-start justify-between"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isEditModal) handleSubmit(saveTask)();
+              else setIsEditModal(!isEditModal);
+            }}
+          >
             <div class="flex w-full flex-row items-start justify-between">
-              <div class="flex flex-col">
+              <div class="flex flex-1 flex-col gap-1 pe-2">
-                <p class="text-2xl">{editContent.name}</p>
+                <input
-                <p>{editContent.description}</p>
+                  class="w-full text-2xl outline-0"
+                  disabled={!isEditModal}
+                  placeholder="Название"
+                  {...register("name", {
+                    required: "Заполните название",
+                    maxLength: { value: 20, message: "Максимум 20 символов в названии" },
+                  })}
+                />
+                <textarea
+                  class="h-[5rem] w-full resize-none outline-0"
+                  disabled={!isEditModal}
+                  placeholder={isEditModal ? "Описание" : ""}
+                  {...register("description", {
+                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
+                  })}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" hidden {...register("checked")} />
               </div>
-              <div className="flex cursor-pointer flex-col items-center gap-3">
+              <div class="flex flex-row gap-4">
-                <PencilIcon class="size-6" />
+                <div
-                <p class="text-[0.7rem]">Редактировать</p>
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => {
+                    if (isEditModal) {
+                      handleSubmit(saveTask)();
+                      setIsEditModal(!isEditModal);
+                    } else setIsEditModal(!isEditModal);
+                  }}
+                >
+                  {isEditModal ? (
+                    <>
+                      <InboxArrowDownIcon class="size-6" />
+                      <p class="text-[0.7rem]">Сохранить</p>
+                    </>
+                  ) : (
+                    <>
+                      <PencilIcon class="size-6" />
+                      <p class="text-[0.7rem]">Редактировать</p>
+                    </>
+                  )}
+                </div>
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => setShowDeleteDialog(true)}
+                >
+                  <TrashIcon class="size-6" />
+                  <p class="text-[0.7rem]">Удалить</p>
+                </div>
               </div>
             </div>
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.description && <p class="text-red-500">{errors.description.message}</p>}
+            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+            {errors.tags && <p class="text-red-500">{errors.tags.message}</p>}
             <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
               <div
-                class="flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1"
+                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
+                  "cursor-pointer": isEditModal,
+                })}
                 onClick={() => {
+                  if (!isEditModal) return;
                   setOpenModalCalendar(true);
                   setCalendarDate(editContent.date);
                 }}
@@ -121,10 +297,19 @@ const ProfileTasks: FunctionComponent = () => {
                     year: "numeric",
                     hour: "2-digit",
                     minute: "2-digit",
-                  }).format(editContent.date)}
+                  }).format(calendarDate!)}
                 </p>
               </div>
-              <div class="flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2">
+              <div
+                class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setTags({ first: editContent.tags[0], second: editContent.tags[1] });
+                  setOpenModalTags(true);
+                }}
+              >
                 <p class="flex flex-row gap-2">
                   <BookOpenIcon class="size-5" />
                   {editContent.tags[0]}
@@ -135,30 +320,53 @@ const ProfileTasks: FunctionComponent = () => {
                 </p>
               </div>
             </div>
-          </div>
+          </form>
         )}
         {isCreating && (
-          <div class="flex h-full w-full flex-col items-start justify-between">
+          <form
-            <div class="flex w-full flex-row items-start justify-between">
+            class="flex h-full w-full flex-col items-start justify-between"
-              <div class="me-4 flex flex-1 flex-col gap-1">
+            onSubmit={(e) => {
-                <input class="text-2xl outline-0" maxLength={20} placeholder="Название" ref={taskNameRef} />
+              e.preventDefault();
-                <textarea
+              handleSubmit((data) => saveTask({ ...data, id: uuid() }))();
-                  class="h-[5rem] w-full resize-none outline-0"
+            }}
-                  maxLength={200}
+          >
-                  placeholder="Описание"
+            <div class="flex w-full flex-1 flex-row items-start justify-between">
-                  ref={taskDescriptionRef}
+              <div class="me-4 flex h-full flex-1 flex-col gap-1">
+                <input
+                  class="text-2xl outline-0"
+                  maxLength={20}
+                  placeholder="Название"
+                  {...register("name", { required: "Заполните название" })}
                 />
+                <textarea
+                  class="mb-10 w-full flex-1 resize-none outline-0"
+                  placeholder="Описание"
+                  maxLength={200}
+                  {...register("description")}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" checked={false} hidden {...register("checked")} />
+              </div>
+              <div class="flex flex-row gap-3 self-start">
+                <CalendarDaysIcon
+                  class="size-10 cursor-pointer"
+                  onClick={() => {
+                    setOpenModalCalendar(true);
+                    setCalendarDate(calendarDate ?? new Date());
+                  }}
+                />
+                <BookmarkIcon class="ms-4 size-10 cursor-pointer" onClick={() => setOpenModalTags(true)} />
               </div>
-              <CalendarDaysIcon
-                class="size-10 cursor-pointer"
-                onClick={() => {
-                  setOpenModalCalendar(true);
-                  setCalendarDate(calendarDate ?? new Date());
-                }}
-              />
-              <BookmarkIcon class="ms-4 size-10 cursor-pointer" />
             </div>
-            <div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row">
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+            {errors.tags && <p class="text-red-500">{errors.tags.message}</p>}
+            <div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row md:self-start">
               <Button
                 className="text-sm"
                 onClick={() => {
@@ -167,58 +375,92 @@ const ProfileTasks: FunctionComponent = () => {
               >
                 Отмена
               </Button>
-              <Button
+              <Button color="red" type="submit">
-                color="red"
-                onClick={() => {
-                  if (taskNameRef.current && taskDescriptionRef.current) {
-                    if (!taskNameRef.current.value || !taskDescriptionRef.current.value) {
-                      alert("Заполните все поля");
-                      return;
-                    }
-                    if (!calendarDate) {
-                      alert("Заполните дату и время");
-                      return;
-                    }
-                    const task: ITask = {
-                      id: tasks.length + 1,
-                      name: taskNameRef.current.value,
-                      description: taskDescriptionRef.current.value,
-                      date: calendarDate,
-                      checked: false,
-                      tags: ["Математика", "Домашнее задание"],
-                    };
-                    setTasks([...tasks, task]);
-                    setIsOpen(false);
-                    setCalendarDate(null);
-                  }
-                }}
-              >
                 Добавить задачу
               </Button>
             </div>
-          </div>
+          </form>
         )}
       </ModalWindow>
+      <Dialog
+        isOpen={showDeleteDialog}
+        setIsOpen={setShowDeleteDialog}
+        title="Удаление задачи"
+        content="Вы уверены, что хотите удалить эту задачу?"
+        onConfirm={handleDeleteTask}
+        confirmText="Удалить"
+        cancelText="Отмена"
+      />
       {tasks.length > 0 ? (
         <>
           <div class={classes.header}>Сегодня: {getDate}</div>
           <div class={classes.tasks_container}>
-            {tasks
+            {groupTasksByDate.today.length > 0 ? (
-              .sort((a, b) => b.date.getTime() - a.date.getTime())
+              <div class="w-full">
-              .map((task) => (
+                {groupTasksByDate.today.map((task) => (
-                <Task
+                  <Task
-                  name={task.name}
+                    name={task.name}
-                  key={task.id}
+                    key={task.id}
-                  checked={task.checked}
+                    checked={task.checked}
-                  onClick={() => {
+                    onClick={() => {
-                    setIsOpen(true);
+                      setIsOpen(true);
-                    setIsEdit(true);
+                      setIsEdit(true);
-                    setEditContent(task);
+                      setEditContent(task);
-                  }}
+                      setCalendarDate(task.date);
-                />
+                    }}
-              ))}
+                    onMarkClick={() => {
+                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    }}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div class="w-full text-center text-xl">Задач на сегодня нет</div>
+            )}
+            {groupTasksByDate.tomorrow.length > 0 && (
+              <div class="flex w-full flex-col gap-3 md:gap-10">
+                <div class="w-full text-3xl font-semibold md:text-5xl">Завтра</div>
+                {groupTasksByDate.tomorrow.map((task) => (
+                  <Task
+                    name={task.name}
+                    key={task.id}
+                    checked={task.checked}
+                    onClick={() => {
+                      setIsOpen(true);
+                      setIsEdit(true);
+                      setEditContent(task);
+                      setCalendarDate(task.date);
+                    }}
+                    onMarkClick={() => {
+                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+            {groupTasksByDate.future.map((group) => (
+              <div class="flex w-full flex-col gap-3 md:gap-10" key={group.date.getTime()}>
+                <div class="w-full text-3xl font-semibold md:text-5xl">{formatDate(group.date)}</div>
+                {group.tasks.map((task) => (
+                  <Task
+                    name={task.name}
+                    key={task.id}
+                    checked={task.checked}
+                    onClick={() => {
+                      setIsOpen(true);
+                      setIsEdit(true);
+                      setEditContent(task);
+                      setCalendarDate(task.date);
+                    }}
+                    onMarkClick={() => {
+                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    }}
+                  />
+                ))}
+              </div>
+            ))}
           </div>
-          <div class="group fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:flex">
+          <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
             <div
               class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
               onClick={() => {
@@ -228,7 +470,7 @@ const ProfileTasks: FunctionComponent = () => {
             >
               <PlusIcon />
             </div>
-            <div class="absolute left-0 my-auto flex flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100">
+            <div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
               <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
                 <MagnifyingGlassIcon class="size-12" />
               </div>

src/utils/status-system.ts

@@ -0,0 +1,26 @@
+export interface StatusLevel {
+  name: string;
+  minPoints: number;
+}
+
+export const STATUS_LEVELS: StatusLevel[] = [
+  { name: "Завтра точно начну", minPoints: 0 },
+  { name: "Всё по плану (плана нет)", minPoints: 25 },
+  { name: "Гений прокрастинации (но всё сделал)", minPoints: 50 },
+  { name: "Хвостоуничтожитель 3000", minPoints: 75 },
+  { name: "Легенда планирования", minPoints: 90 }
+];
+
+const POINTS_PER_TASK = 5;
+
+export const calculatePoints = (completedTasks: number): number => {
+  return Math.min(completedTasks * POINTS_PER_TASK, 100);
+};
+
+export const getCurrentStatus = (points: number): string => {
+  const status = STATUS_LEVELS
+    .slice()
+    .reverse()
+    .find(level => points >= level.minPoints);
+  return status?.name || STATUS_LEVELS[0].name;
+};