feat: calendar circle colors

feat: fixed tags
feat: avatars
2025-05-15 16:36:15 +03:00 · 2025-05-12 19:50:02 +03:00 · 2025-05-12 16:16:26 +03:00 · 2025-05-12 15:59:16 +03:00 · 2025-05-12 15:39:50 +03:00 · 2025-05-12 02:36:20 +03:00
20 changed files with 1112 additions and 699 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="ru">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Антихвост</title>
  </head>
--- a/src/assets/main.svg
+++ b/src/assets/main.svg
--- a/src/assets/status/1.png
+++ b/src/assets/status/1.png
--- a/src/assets/status/2.png
+++ b/src/assets/status/2.png
--- a/src/assets/status/3.png
+++ b/src/assets/status/3.png
--- a/src/assets/status/4.png
+++ b/src/assets/status/4.png
--- a/src/assets/status/5.png
+++ b/src/assets/status/5.png
--- a/src/components/ModalSettings.tsx
+++ b/src/components/ModalSettings.tsx
@@ -145,7 +145,7 @@ const ModalSettings: FunctionComponent<ModalWindowProps> = ({ isOpen, setIsOpen,
            <input
              class="flex-1 outline-0"
              {...register("oldPassword")}
-              placeholder="Новый пароль"
+              placeholder="Старый пароль"
              type={showOldPassword ? "text" : "password"}
            />
            {showOldPassword ? (
@@ -185,7 +185,12 @@ const ModalSettings: FunctionComponent<ModalWindowProps> = ({ isOpen, setIsOpen,
        </div>
        <div class={cn({ hidden: !enableNotification })}>
          <div class="flex flex-col items-start gap-2">
-            <span class="ms-5 text-sm">Telegram ID</span>
+            <span class="ms-5 text-sm">
+              Telegram ID. Для работы перейдите в бота{" "}
+              <a href="https://t.me/antihvost_notif_bot" class="font-medium text-blue-600 hover:underline">
+                @antihvost_notif_bot
+              </a>
+            </span>
            <div class="flex w-full flex-row items-center rounded-[4rem] px-5 py-3 leading-8 ring-2 ring-[rgba(206,232,251,0.7)]">
              <input class="flex-1 outline-0" {...register("tgId")} placeholder={tgId} />
              <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("tgId", "")} />
--- a/src/components/ModalTags.tsx
+++ b/src/components/ModalTags.tsx
@@ -1,13 +1,17 @@
+import { IAPITag, IViewTagsResponse } from "@/pages/profile_tasks.dto";
+import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
-import { BookOpenIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { BookOpenIcon, CheckIcon, DocumentDuplicateIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent } from "preact";
-import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useEffect, useRef, useState } from "preact/hooks";
 import Button from "./ui/Button";
+import Dialog from "./ui/Dialog";
 import ModalWindow, { ModalWindowProps } from "./ui/Modal";

 export interface ITags {
-  first: string;
-  second: string;
+  first: number;
+  second: number;
  overdue: boolean;
 }

@@ -18,9 +22,10 @@ interface ModalTagsProps extends ModalWindowProps {
  value?: ITags;
  onChange?: Dispatch<StateUpdater<ITags>>;
  tagsList?: {
-    first: string[];
-    second: string[];
+    first: IAPITag[];
+    second: IAPITag[];
  };
+  refreshTags: () => Promise<IViewTagsResponse | void>;
 }

 const ModalTags: FunctionComponent<ModalTagsProps> = ({
@@ -30,17 +35,89 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
  onChange,
  value,
  tagsList,
+  refreshTags,
  ...rest
 }) => {
  const [showFirstTags, setShowFirstTags] = useState(false);
  const [showSecondTags, setShowSecondTags] = useState(false);
+  const [showAddFirstTag, setShowAddFirstTag] = useState(false);
+  const [showAddSecondTag, setShowAddSecondTag] = useState(false);
+  const [showErrorDialog, setShowErrorDialog] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string[]>([]);
+  const addFirstTagRef = useRef<HTMLInputElement>(null);
+  const addSecondTagRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (showFirstTags && showSecondTags) setShowFirstTags(false);
  }, [showSecondTags]);
  useEffect(() => {
    if (showFirstTags && showSecondTags) setShowSecondTags(false);
  }, [showFirstTags]);
+
+  const handleCreateTag = async () => {
+    if (!addFirstTagRef.current?.value && !addSecondTagRef.current?.value) return;
+
+    const data: { subject_name?: string; taskType_name?: string } = {};
+    if (addFirstTagRef.current && addFirstTagRef.current.value) data.subject_name = addFirstTagRef.current.value;
+    if (addSecondTagRef.current && addSecondTagRef.current.value) data.taskType_name = addSecondTagRef.current.value;
+    const response = await apiClient<{ success: boolean; subject?: IAPITag; taskType?: IAPITag }>(
+      "/api/tags/create_tags/",
+      { method: "POST", body: JSON.stringify(data) }
+    );
+    if (response.success) {
+      await refreshTags();
+      if (showAddFirstTag) {
+        const new_subject_id = response.subject!.id;
+        onChange!((prev) => ({ ...prev, first: new_subject_id }));
+        setShowAddFirstTag(false);
+      }
+      if (showAddSecondTag) {
+        const new_taskType_id = response.taskType!.id;
+        onChange!((prev) => ({ ...prev, second: new_taskType_id }));
+        setShowAddSecondTag(false);
+      }
+    }
+    if (addFirstTagRef.current) addFirstTagRef.current.value = "";
+    if (addSecondTagRef.current) addSecondTagRef.current.value = "";
+  };
+
+  const handleDeleteTag = async (id: number) => {
+    const data: { subject_id?: number; taskType_id?: number } = {};
+    if (showFirstTags) data.subject_id = id;
+    if (showSecondTags) data.taskType_id = id;
+    const response = await apiClient<{ error?: string }>(`/api/tags/delete_tag/`, {
+      method: "DELETE",
+      body: JSON.stringify(data),
+    });
+    if (!response.error) {
+      await refreshTags();
+    } else {
+      setShowErrorDialog(true);
+      const match = response.error?.match(/\[(.+)\]/);
+      if (match) setErrorMessage(match[1].split(", ").map((s) => s.trim().replace(/'/g, "")));
+    }
+  };
+
  return (
+    <>
+      <Dialog
+        isOpen={showErrorDialog}
+        setIsOpen={setShowErrorDialog}
+        title="Ошибка!"
+        confirmation={false}
+        cancelText="Ок"
+      >
+        <div class="flex flex-col items-start gap-1">
+          <p class="mb-6 text-sm sm:text-[1rem]">
+            Данный тег есть в других задачах. Поменяйте теги в них и повторите операцию.
+          </p>
+          <p class="text-sm sm:text-[1rem]">Задачи с этим тегом:</p>
+          <ul class="ms-6 list-disc">
+            {errorMessage.map((s, i) => (
+              <li key={i}>{s}</li>
+            ))}
+          </ul>
+        </div>
+      </Dialog>
      <ModalWindow
        isOpen={isOpen}
        {...rest}
@@ -49,6 +126,8 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
          onClose!();
          setShowFirstTags(false);
          setShowSecondTags(false);
+          setShowAddFirstTag(false);
+          setShowAddSecondTag(false);
        }}
        className="relative h-[14rem] justify-between py-4 md:h-[14rem] md:w-[25rem]"
        zIndex={70}
@@ -57,27 +136,37 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
        <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)}
+            onClick={() => {
+              setShowFirstTags(!showFirstTags);
+              setShowSecondTags(false);
+              setShowAddFirstTag(false);
+              setShowAddSecondTag(false);
+            }}
          >
            <BookOpenIcon class="size-6" />
-          {value?.first || "Предмет"}
+            {tagsList?.first?.find((tag) => tag.id === value?.first)?.name || "Предмет"}
          </Button>
          <Button
            className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]! break-words"
-          onClick={() => setShowSecondTags(!showSecondTags)}
+            onClick={() => {
+              setShowSecondTags(!showSecondTags);
+              setShowFirstTags(false);
+              setShowAddFirstTag(false);
+              setShowAddSecondTag(false);
+            }}
          >
            <DocumentDuplicateIcon class="size-6" />
-          {value?.second || "Тема"}
+            {tagsList?.second?.find((tag) => tag.id === value?.second)?.name || "Тема"}
          </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">
+            <div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center gap-3 md:top-0 md:left-full md:mt-0 md:ml-5">
+              <div class="flex h-fit max-h-[15rem] w-full flex-col gap-3 overflow-y-auto rounded-[4rem] bg-white px-8 py-4 text-xs">
                {tagsList?.first.map((tag) => (
                  <div
-                  class="flex cursor-pointer flex-row gap-2"
+                    class="flex cursor-pointer flex-row items-center gap-2"
                    onClick={() =>
                      onChange?.((prev) => {
-                      return { ...prev, first: tag };
+                        return { ...prev, first: tag.id };
                      })
                    }
                  >
@@ -85,27 +174,50 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
                      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,
+                          "bg-black": value?.first === tag.id,
                        }
                      )}
                    >
                      ✓
                    </div>
-                  <p>{tag}</p>
+                    <p class="flex-1">{tag.name}</p>
+                    <XMarkIcon
+                      class="size-4 cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteTag(tag.id);
+                      }}
+                    />
                  </div>
                ))}
+                <button
+                  class="mt-2 flex w-full cursor-pointer flex-row items-center gap-2"
+                  onClick={() => {
+                    setShowAddFirstTag(!showAddFirstTag);
+                    setTimeout(() => addFirstTagRef.current?.focus(), 100);
+                  }}
+                >
+                  <PlusCircleIcon class="size-5" />
+                  <span>Добавить</span>
+                </button>
              </div>
+              {showAddFirstTag && (
+                <div class="flex w-full flex-row items-center rounded-[4rem] bg-white px-8 py-4 text-xs">
+                  <input placeholder="Введите текст" class="flex-1 outline-0" ref={addFirstTagRef} />
+                  <CheckIcon class="size-6 cursor-pointer" onClick={handleCreateTag} />
+                </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">
+            <div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center gap-3 md:top-0 md:left-full md:mt-0 md:ml-5">
+              <div class="flex h-fit max-h-[15rem] w-full flex-col gap-3 overflow-y-auto rounded-[4rem] bg-white px-8 py-4 text-xs">
                {tagsList?.second.map((tag) => (
                  <div
                    class="flex cursor-pointer flex-row gap-2"
                    onClick={() =>
                      onChange?.((prev) => {
-                      return { ...prev, second: tag };
+                        return { ...prev, second: tag.id };
                      })
                    }
                  >
@@ -113,20 +225,44 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
                      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,
+                          "bg-black": value?.second === tag.id,
                        }
                      )}
                    >
                      ✓
                    </div>
-                  <p>{tag}</p>
+                    <p class="flex-1">{tag.name}</p>
+                    <XMarkIcon
+                      class="size-4 cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteTag(tag.id);
+                      }}
+                    />
                  </div>
                ))}
+                <button
+                  class="mt-2 flex w-full cursor-pointer flex-row items-center gap-2"
+                  onClick={() => {
+                    setShowAddSecondTag(!showAddSecondTag);
+                    setTimeout(() => addSecondTagRef.current?.focus(), 100);
+                  }}
+                >
+                  <PlusCircleIcon class="size-5" />
+                  <span>Добавить</span>
+                </button>
              </div>
+              {showAddSecondTag && (
+                <div class="flex w-full flex-row items-center rounded-[4rem] bg-white px-8 py-4 text-xs">
+                  <input placeholder="Введите текст" class="flex-1 outline-0" ref={addSecondTagRef} />
+                  <CheckIcon class="size-6 cursor-pointer" onClick={handleCreateTag} />
+                </div>
+              )}
            </div>
          )}
        </div>
      </ModalWindow>
+    </>
  );
 };

--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -1,12 +1,13 @@
+import { useAppContext } from "@/providers/AuthProvider";
+import apiClient from "@/services/api";
+import { getAvatarPicUrl } from "@/services/avatar-pic";
 import { cn } from "@/utils/class-merge";
 import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
-import { useEffect, useState } from "preact/hooks";
-import apiClient from "@/services/api";
-import { useAppContext } from "@/providers/AuthProvider";

 interface UserProfile {
  username: string;
@@ -72,7 +73,7 @@ const Avatar: FunctionComponent = () => {
    }
  }, [isLoggedIn.value]);

-  return (
+  return username ? (
    <button
      onClick={() => route("/profile/settings")}
      class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", {
@@ -84,14 +85,16 @@ const Avatar: FunctionComponent = () => {
          "h-full flex-row items-center justify-around rounded-[3rem] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex"
        )}
      >
-        <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
+        <div class="my-5 aspect-square h-full rounded-full">
+          <img class="size-full rounded-full" src={getAvatarPicUrl(status)} alt="avatar" />
+        </div>
        <div class="flex flex-col items-center justify-center">
          <p class="text-3xl font-semibold">{username}</p>
          <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
        </div>
      </div>
    </button>
-  );
+  ) : null;
 };

 interface MenuItems {
--- a/src/components/task.module.scss
+++ b/src/components/task.module.scss
@@ -1,5 +1,5 @@
@reference "../index.scss";

 .task {
-  @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];
+  @apply relative flex h-24 w-full cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] active:scale-[1.05] md:w-[500px];
 }
--- a/src/components/task.tsx
+++ b/src/components/task.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/utils/class-merge";
 import { FunctionComponent } from "preact";
 import { MouseEventHandler } from "preact/compat";
 import { tv } from "tailwind-variants";
@@ -5,6 +6,7 @@ import classes from "./task.module.scss";

 interface TaskProps {
  name: string;
+  priority?: number;
  checked?: boolean;
  overdue?: boolean;
  onClick?: () => void;
@@ -36,11 +38,21 @@ const Task: FunctionComponent<TaskProps> = ({
  checked = false,
  onClick = () => {},
  onMarkClick = () => {},
+  priority = 4,
  overdue,
 }) => {
  return (
    <div class="w-[95%]">
-      <div class={classes.task} onClick={onClick}>
+      <div
+        class={cn(
+          classes.task,
+          { "bg-[linear-gradient(90.00deg,rgba(18,26,230,0.29),rgba(251,194,199,0.34)_100%)]": priority == 1 },
+          { "bg-[linear-gradient(90.00deg,rgba(97,200,232,0.6),rgba(251,194,199,0.42)_100%)]": priority == 2 },
+          { "bg-[linear-gradient(90.00deg,rgba(247,220,52,0.61),rgba(251,194,199,0.38)_97.71%)]": priority == 3 },
+          { "bg-[rgba(251,194,199,0.53)] hover:bg-[rgba(251,194,199,0.7)]": priority == 4 }
+        )}
+        onClick={onClick}
+      >
        <div
          class={taskStyle({ checked })}
          onClick={(e) => {
--- a/src/components/ui/Dialog.tsx
+++ b/src/components/ui/Dialog.tsx
@@ -5,20 +5,21 @@ interface DialogProps {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
  title: string;
-  content: string;
-  onConfirm: () => void;
+  onConfirm?: () => void;
  confirmText?: string;
  cancelText?: string;
+  confirmation?: boolean;
 }

 const Dialog: FunctionComponent<DialogProps> = ({
  isOpen,
  setIsOpen,
  title,
-  content,
-  onConfirm,
+  children,
+  onConfirm = () => {},
  confirmText = "Подтвердить",
  cancelText = "Отмена",
+  confirmation = true,
 }) => {
  if (!isOpen) return null;

@@ -26,8 +27,10 @@ const Dialog: FunctionComponent<DialogProps> = ({
    <div class="fixed inset-0 z-150 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 text-sm sm:text-[1rem]">{content}</p>
+        {children}
        <div class="flex justify-end gap-4">
+          {confirmation ? (
+            <>
              <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
                {cancelText}
              </Button>
@@ -40,6 +43,12 @@ const Dialog: FunctionComponent<DialogProps> = ({
              >
                {confirmText}
              </Button>
+            </>
+          ) : (
+            <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
+              {cancelText}
+            </Button>
+          )}
        </div>
      </div>
    </div>
--- a/src/pages/profile_calendar.tsx
+++ b/src/pages/profile_calendar.tsx
@@ -18,17 +18,22 @@ import {
 import { FunctionComponent } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
+import { Dropdown } from "primereact/dropdown";
 import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
+import { priorities } from "./profile_tasks";
 import {
  IApiResponse,
+  IAPITag,
  ICreateTaskResponse,
  IDeleteTaskResponse,
  IEditTaskResponse,
  ITask,
  ITaskDetails,
  ITaskForm,
+  IViewTagsResponse,
 } from "./profile_tasks.dto";
+import { DropdownStyles, selectedPriorityTemplate } from "./profile_tasks.prime.styles";

 const calendarStyles = {
  root: "inline-flex w-full relative",
@@ -61,11 +66,12 @@ 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: "", overdue: false });
+  const [tags, setTags] = useState<ITags>({ first: 0, second: 0, overdue: false });
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [subjectChoices, setSubjectChoices] = useState<Record<string, string>>({});
-  const [taskTypeChoices, setTaskTypeChoices] = useState<Record<string, string>>({});
+  const [subjectChoices, setSubjectChoices] = useState<IAPITag[]>([]);
+  const [taskTypeChoices, setTaskTypeChoices] = useState<IAPITag[]>([]);
  const [isLoading, setIsLoading] = useState(true);
+  const [selectedPriority, setSelectedPriority] = useState(4);

  const {
    handleSubmit,
@@ -74,30 +80,38 @@ const ProfileCalendar: FunctionComponent = () => {
    setError,
    formState: { errors },
  } = useForm<ITaskForm>({
-    defaultValues: {
-      tags: [],
-    },
+    defaultValues: {},
  });

  useEffect(() => {
    fetchTasks();
+    fetchTags();
  }, []);

+  const fetchTags = async () => {
+    try {
+      const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
+      setSubjectChoices(response.subjects);
+      setTaskTypeChoices(response.taskTypes);
+    } catch (error) {
+      console.error("Failed to fetch tags:", error);
+    }
+  };
+
  const fetchTasks = async () => {
    try {
      setIsLoading(true);
      const response = await apiClient<IApiResponse>("/api/tasks/view_tasks/");

-      setSubjectChoices(response.subject_choices);
-      setTaskTypeChoices(response.task_type_choices);
-
      const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({
        id: apiTask.id.toString(),
        name: apiTask.title,
        checked: apiTask.isCompleted,
        date: new Date(apiTask.due_date),
        description: apiTask.description,
-        tags: [apiTask.subject, apiTask.task_type],
+        priority: apiTask.priority,
+        subject: apiTask.subject,
+        taskType: apiTask.taskType,
        new: false,
      }));

@@ -111,8 +125,8 @@ const ProfileCalendar: FunctionComponent = () => {

  const example_tags = useMemo(
    () => ({
-      first: Object.keys(subjectChoices),
-      second: Object.keys(taskTypeChoices),
+      first: subjectChoices,
+      second: taskTypeChoices,
    }),
    [subjectChoices, taskTypeChoices]
  );
@@ -122,14 +136,14 @@ const ProfileCalendar: FunctionComponent = () => {
      setError("date", { message: "Выберите дату" });
      return;
    }
-    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
-      setError("tags", { message: "Выберите теги" });
+    if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
+      setError("date", { message: "Выберите теги" });
      return;
    }

    try {
-      const selectedSubject = editContent?.tags[0] || tags.first;
-      const selectedTaskType = editContent?.tags[1] || tags.second;
+      const selectedSubject = tags.first || editContent?.subject.id;
+      const selectedTaskType = tags.second || editContent?.taskType.id;

      // Format date to DD-MM-YYYYTHH:MM
      const formattedDate = calendarDate
@@ -148,10 +162,11 @@ const ProfileCalendar: FunctionComponent = () => {
      const taskData = {
        title: data.name,
        description: data.description || "",
-        subject: selectedSubject,
-        taskType: selectedTaskType,
+        subject_id: selectedSubject,
+        taskType_id: selectedTaskType,
        dateTime_due: formattedDate,
        telegram_notifications: false,
+        priority: selectedPriority,
      };

      if (!editContent) {
@@ -171,12 +186,22 @@ const ProfileCalendar: FunctionComponent = () => {

        if (!response.success) {
          throw new Error(response.message);
-        }
+        } else if (isEdit)
+          setEditContent({
+            name: response.task.title,
+            id: response.task.id.toString(),
+            description: response.task.description,
+            priority: response.task.priority,
+            checked: response.task.isCompleted,
+            subject: response.task.subject,
+            taskType: response.task.task_type,
+            date: new Date(response.task.dateTime_due),
+          });
      }

      await fetchTasks();
      setIsOpen(false);
-      setTags({ first: "", second: "", overdue: false });
+      setTags({ first: 0, second: 0, overdue: false });
    } catch (error) {
      console.error("Failed to save task:", error);
    }
@@ -226,14 +251,16 @@ const ProfileCalendar: FunctionComponent = () => {
        checked: false,
        date: new Date(taskDetails.dateTime_due),
        description: taskDetails.description,
-        tags: [taskDetails.subject, taskDetails.taskType],
-        new: false,
+        subject: taskDetails.subject,
+        taskType: taskDetails.task_type,
+        priority: taskDetails.priority,
      };

      setIsOpen(true);
      setIsEdit(true);
      setEditContent(task);
      setCalendarDate(task.date);
+      setSelectedPriority(task.priority);
      setIsEditModal(false);
    } catch (error) {
      console.error("Failed to fetch task details:", error);
@@ -263,18 +290,35 @@ const ProfileCalendar: FunctionComponent = () => {
  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];
+    if (tags.first) newEditContent.subject = subjectChoices.find((tag) => tag.id === tags.first)!;
+    if (tags.second) newEditContent.taskType = taskTypeChoices.find((tag) => tag.id === tags.second)!;
    setEditContent(newEditContent);
  }, [tags]);

  const tasksCount = (date: CalendarDateTemplateEvent) => {
-    return tasks.filter((task) => {
+    const filterTasks = tasks.filter((task) => {
      const taskDate = task.date;
      return (
        taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
      );
-    }).length;
+    });
+    return {
+      length: filterTasks.length,
+      colors: filterTasks.map((task) => {
+        switch (task.priority) {
+          case 1:
+            return "bg-[rgba(18,26,230,1)]";
+          case 2:
+            return "bg-[rgba(97,200,232,1)]";
+          case 3:
+            return "bg-[rgba(247,220,52,1)]";
+          case 4:
+            return "bg-[rgba(251,194,199,1)]";
+          default:
+            return "bg-[rgba(251,194,199,1)]";
+        }
+      }),
+    };
  };

  const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
@@ -288,7 +332,8 @@ const ProfileCalendar: FunctionComponent = () => {

  const dateTemplate = (date: CalendarDateTemplateEvent) => {
    const isHighlighted = hasTasksOnDate(date);
-    const countT = tasksCount(date);
+    const taskInfo = tasksCount(date);
+    if (taskInfo.length) console.log(taskInfo);
    const isSelected =
      currentDate &&
      currentDate.getDate() === date.day &&
@@ -312,10 +357,10 @@ const ProfileCalendar: FunctionComponent = () => {
        <span>{date.day}</span>
        {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" />
+            {Array.from({ length: taskInfo.length > 3 ? 3 : taskInfo.length }).map((_, i) => (
+              <span key={i} className={cn("size-2 rounded-full", taskInfo.colors[i])} />
            ))}
-            {countT > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
+            {taskInfo.length > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
          </div>
        )}
      </div>
@@ -351,39 +396,15 @@ const ProfileCalendar: FunctionComponent = () => {

  return (
    <div class="flex w-full flex-col items-center">
-      {isLoading ? (
-        <div class="flex w-full flex-1 items-center justify-center">
-          <div class="text-2xl">Загрузка...</div>
-        </div>
-      ) : (
-        <>
-          <ModalTags
-            isOpen={openModalTags}
-            setIsOpen={setOpenModalTags}
-            tagsList={example_tags}
-            value={tags}
-            onClose={() => {
-              setTags({ first: "", second: "", overdue: false });
-            }}
-            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);
+          setSelectedPriority(4);
          setIsEditModal(false);
-              setTags({ first: "", second: "", overdue: false });
+          setTags({ first: 0, second: 0, overdue: false });
          setCalendarDate(null);
        }}
      >
@@ -461,15 +482,11 @@ const ProfileCalendar: FunctionComponent = () => {
            {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",
-                      {
+                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);
@@ -488,40 +505,71 @@ const ProfileCalendar: FunctionComponent = () => {
                </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",
-                      {
+                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], overdue: false });
+                  setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
                  setOpenModalTags(true);
                }}
              >
                <p class="flex flex-row gap-2">
                  <BookOpenIcon class="size-5" />
-                      {editContent.tags[0]}
+                  {editContent.subject.name}
                </p>
                <p class="flex flex-row gap-2">
                  <DocumentDuplicateIcon class="size-5" />
-                      {editContent.tags[1]}
+                  {editContent.taskType.name}
                </p>
              </div>
+              <Dropdown
+                disabled={!isEditModal}
+                pt={DropdownStyles}
+                options={priorities}
+                value={selectedPriority}
+                onChange={(e) => setSelectedPriority(e.value)}
+                itemTemplate={selectedPriorityTemplate}
+                valueTemplate={selectedPriorityTemplate}
+              />
            </div>
          </form>
        )}
      </ModalWindow>
+      {isLoading ? (
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
+      ) : (
+        <>
+          <ModalTags
+            refreshTags={fetchTags}
+            isOpen={openModalTags}
+            setIsOpen={setOpenModalTags}
+            tagsList={example_tags}
+            value={tags}
+            onClose={() => {
+              setTags({ first: 0, second: 0, overdue: false });
+            }}
+            onChange={setTags}
+          />
+          <ModalCalendar
+            isOpen={openModalCalendar}
+            setIsOpen={setOpenModalCalendar}
+            onClose={() => {
+              if (isEdit && !isEditModal) setCalendarDate(null);
+            }}
+            onChange={(e) => isEditModal && setCalendarDate(e.value)}
+            value={calendarDate!}
+          />
          <Dialog
            isOpen={showDeleteDialog}
            setIsOpen={setShowDeleteDialog}
            title="Удаление задачи"
-            content="Вы уверены, что хотите удалить эту задачу?"
            onConfirm={handleDeleteTask}
            confirmText="Удалить"
            cancelText="Отмена"
-          />
+          >
+            <p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
+          </Dialog>
          <Calendar
            value={currentDate}
            onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
@@ -540,6 +588,8 @@ const ProfileCalendar: FunctionComponent = () => {
                    key={task.id}
                    name={task.name}
                    checked={task.checked}
+                    priority={task.priority}
+                    overdue={task.date < new Date()}
                    onClick={() => handleViewTask(task.id)}
                    onMarkClick={() => handleTaskCheck(task.id)}
                  />
--- a/src/pages/profile_settings.module.scss
+++ b/src/pages/profile_settings.module.scss
@@ -5,7 +5,7 @@
 }

 #avatar {
-  @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full bg-white;
+  @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full;
 }

 .profile_container {
--- a/src/pages/profile_settings.tsx
+++ b/src/pages/profile_settings.tsx
@@ -4,6 +4,7 @@ import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import apiClient from "@/services/api";
+import { getAvatarPicUrl } from "@/services/avatar-pic";
 import { cn } from "@/utils/class-merge";
 import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
@@ -62,11 +63,19 @@ const ProfileSettings: FunctionComponent = () => {
      console.error("Logout failed:", error);
    }
  };
+  if (!userData.username)
+    return (
+      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
+      </div>
+    );
  return (
    <div class={classes.container}>
      <ModalSettings isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} onClose={fetchUserData} />
      <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 id={classes.avatar}>
+          <img class="size-28 rounded-full" src={getAvatarPicUrl(userData.status)} alt="avatar" />
+        </div>
        <div class={classes.header_block__name}>
          <p class="text-4xl font-semibold">{userData.username}</p>
          <p class="text-2xl font-light">{userData.status}</p>
@@ -100,4 +109,6 @@ const ProfileSettings: FunctionComponent = () => {
  );
 };

+ProfileSettings.displayName = "ProfileSettings";
+
 export default withTitle(UrlsTitle.PROFILE, ProfileSettings);
--- a/src/pages/profile_tasks.dto.ts
+++ b/src/pages/profile_tasks.dto.ts
@@ -1,14 +1,23 @@
+export interface IAPITag {
+  name: string;
+  id: number;
+}
 export interface ITask {
  id: string;
  name: string;
  checked: boolean;
+  priority: number;
  date: Date;
  description: string;
-  tags: string[];
-  new?: boolean;
+  subject: IAPITag;
+  taskType: IAPITag;
 }

-export interface ITaskForm extends Omit<ITask, "date"> {
+export interface ITaskView extends Omit<ITask, "taskType"> {
+  task_type: IAPITag;
+}
+
+export interface ITaskForm extends Omit<ITask, "date" | "subject" | "taskType"> {
  date: string;
 }

@@ -16,17 +25,16 @@ export interface IApiTask {
  id: number;
  title: string;
  description: string;
+  priority: number;
  isCompleted: boolean;
  due_date: string;
-  subject: string;
-  task_type: string;
+  subject: IAPITag;
+  taskType: IAPITag;
 }

 export interface IApiResponse {
  profile: string;
  tasks: IApiTask[];
-  subject_choices: Record<string, string>;
-  task_type_choices: Record<string, string>;
 }

 export interface ICreateTaskResponse {
@@ -53,12 +61,10 @@ export interface ITaskDetails {
  profile: string;
  title: string;
  description: string;
-  subject: string;
-  taskType: string;
+  subject: IAPITag;
+  task_type: IAPITag;
+  priority: number;
  dateTime_due: string;
-  remind_before_days: number;
-  repeat_reminder: number;
-  reminder_time: string;
 }

 export interface IDeleteTaskResponse {
@@ -74,14 +80,16 @@ export interface IEditTaskResponse {
    id: number;
    title: string;
    description: string;
-    subject: string;
-    taskType: string;
+    subject: IAPITag;
+    task_type: IAPITag;
    dateTime_due: string;
    isCompleted: boolean;
-    reminder?: {
-      remind_before_days: number;
-      repeat_interval: number;
-      reminder_time: string;
-    };
+    priority: number;
  };
 }
+
+export interface IViewTagsResponse {
+  profile: string;
+  subjects: IAPITag[];
+  taskTypes: IAPITag[];
+}
--- a/src/pages/profile_tasks.prime.styles.tsx
+++ b/src/pages/profile_tasks.prime.styles.tsx
@@ -0,0 +1,86 @@
+import { cn } from "@/utils/class-merge";
+import { FlagIcon as FlagIconSolid } from "@heroicons/react/20/solid";
+import { DropdownPassThroughMethodOptions, DropdownPassThroughOptions } from "primereact/dropdown";
+
+export const DropdownStyles: DropdownPassThroughOptions = {
+  root: ({ props }: DropdownPassThroughMethodOptions) => ({
+    className: cn(
+      "cursor-pointer inline-flex relative select-none mb-2",
+      "bg-white border border-gray-400 transition-colors duration-200 ease-in-out rounded-md",
+      "w-full md:w-56",
+      "hover:border-[rgba(251,194,199,0.7)] focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(251,194,199,1)] ",
+      { "opacity-60 select-none pointer-events-none cursor-default": props.disabled }
+    ),
+  }),
+  input: ({ props }: DropdownPassThroughMethodOptions) => ({
+    className: cn(
+      "cursor-pointer flex flex-auto overflow-hidden overflow-ellipsis whitespace-nowrap relative",
+      "bg-transparent border-0 text-gray-800",
+      "p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base",
+      "focus:outline-none focus:shadow-none",
+      { "pr-7": props.showClear }
+    ),
+  }),
+  trigger: {
+    className: cn(
+      "flex items-center justify-center shrink-0",
+      "bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg"
+    ),
+  },
+  wrapper: {
+    className: cn("max-h-[200px] overflow-auto", "bg-white text-gray-700 border-0 rounded-md shadow-lg", " "),
+  },
+  list: { className: "py-3 list-none m-0" },
+  item: ({ context }: DropdownPassThroughMethodOptions) => ({
+    className: cn(
+      "cursor-pointer font-normal overflow-hidden relative whitespace-nowrap",
+      "m-0 p-3 border-0  transition-shadow duration-200 rounded-none",
+      "hover:text-gray-700 hover:bg-gray-200",
+      {
+        "text-gray-700": !context.focused && !context.selected,
+        "bg-gray-300 text-gray-700  ": context.focused && !context.selected,
+        "bg-[rgba(251,194,199,0.7)] text-black  ": context.focused && context.selected,
+        "bg-blue-50 text-gray-700": !context.focused && context.selected,
+        "opacity-60 select-none pointer-events-none cursor-default": context.disabled,
+      }
+    ),
+  }),
+  itemGroup: {
+    className: cn("m-0 p-3 text-gray-800 bg-white font-bold", " ", "cursor-auto"),
+  },
+  header: {
+    className: cn("p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg"),
+  },
+  filterContainer: {
+    className: "relative",
+  },
+  filterInput: {
+    className: cn(
+      "pr-7 -mr-7",
+      "w-full",
+      "font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none",
+      "hover:border-[rgba(251,194,199,0.7)] focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(251,194,199,1)] "
+    ),
+  },
+  filterIcon: { className: "-mt-2 absolute top-1/2" },
+  clearIcon: { className: "text-gray-500 right-12 -mt-2 absolute top-1/2" },
+};
+
+export const selectedPriorityTemplate = (option: { label: string; value: number }) => {
+  return (
+    <div class="flex items-center">
+      <FlagIconSolid
+        className={cn(
+          "mr-2 size-4",
+          { "text-[rgba(18,26,230,0.29)]": option.value == 1 },
+          { "text-[rgba(97,200,232,0.6)]": option.value == 2 },
+          {
+            "text-[rgba(247,220,52,0.61)]": option.value == 3,
+          },
+          { "text-[rgba(251,194,199,0.53)]": option.value == 4 }
+        )}
+      />
+      <span>{option.label}</span>
+    </div>
+  );
+};
--- a/src/pages/profile_tasks.tsx
+++ b/src/pages/profile_tasks.tsx
@@ -1,6 +1,7 @@
 //! Файл большой, потому что было лень делить на компоненты
 import Task from "@/components/task";

+import MainSvg from "@/assets/main.svg";
 import ModalCalendar from "@/components/ModalCalendar";
 import ModalTags, { ITags } from "@/components/ModalTags";
 import Button from "@/components/ui/Button";
@@ -24,21 +25,33 @@ import {
  XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
+import "preact/debug";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { Checkbox, CheckboxPassThroughMethodOptions } from "primereact/checkbox";
+import { Dropdown } from "primereact/dropdown";
+import { SelectItem } from "primereact/selectitem";
 import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
-import { v4 as uuid } from "uuid";
 import {
  IApiResponse,
+  IAPITag,
  ICreateTaskResponse,
  IDeleteTaskResponse,
  IEditTaskResponse,
  ITask,
  ITaskDetails,
  ITaskForm,
+  IViewTagsResponse,
 } from "./profile_tasks.dto";
 import classes from "./profile_tasks.module.scss";
+import { DropdownStyles, selectedPriorityTemplate } from "./profile_tasks.prime.styles";
+
+export const priorities: SelectItem[] = [
+  { label: "Приоритет 1", value: 1 },
+  { label: "Приоритет 2", value: 2 },
+  { label: "Приоритет 3", value: 3 },
+  { label: "Приоритет 4", value: 4 },
+];

 const ProfileTasks: FunctionComponent = () => {
  const [openModal, setIsOpen] = useState(false); // Открыта модалка
@@ -51,42 +64,51 @@ 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: "", overdue: false });
+  const [tags, setTags] = useState<ITags>({ first: 0, second: 0, overdue: false });
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [searchQuery, setSearchQuery] = useState(""); // Текст поиска
-  const [filterTags, setFilterTags] = useState<ITags>({ first: "", second: "", overdue: false });
+  const [filterTags, setFilterTags] = useState<ITags>({ first: 0, second: 0, overdue: false });
  const [openFirstList, setOpenFirstList] = useState(false);
  const [openSecondList, setOpenSecondList] = useState(false);
+  const [selectedPriority, setSelectedPriority] = useState(4);
  const getDate = useMemo(() => {
    const date = new Date();
    const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
    return formatter.format(date);
  }, []);
  const [tasks, setTasks] = useState<ITask[]>([]);
-  const [subjectChoices, setSubjectChoices] = useState<Record<string, string>>({});
-  const [taskTypeChoices, setTaskTypeChoices] = useState<Record<string, string>>({});
+  const [subjectChoices, setSubjectChoices] = useState<IAPITag[]>([]);
+  const [taskTypeChoices, setTaskTypeChoices] = useState<IAPITag[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchTasks();
+    fetchTags();
  }, []);

+  const fetchTags = async (): Promise<IViewTagsResponse | void> => {
+    try {
+      const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
+      setSubjectChoices(response.subjects);
+      setTaskTypeChoices(response.taskTypes);
+    } catch (error) {
+      console.error("Failed to fetch tags:", error);
+    }
+  };
+
  const fetchTasks = async () => {
    try {
      setIsLoading(true);
      const response = await apiClient<IApiResponse>("/api/tasks/view_tasks/");
-
-      setSubjectChoices(response.subject_choices);
-      setTaskTypeChoices(response.task_type_choices);
-
      const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({
        id: apiTask.id.toString(),
        name: apiTask.title,
+        priority: apiTask.priority,
        checked: apiTask.isCompleted,
        date: new Date(apiTask.due_date),
        description: apiTask.description,
-        tags: [apiTask.subject, apiTask.task_type],
-        new: false,
+        subject: apiTask.subject,
+        taskType: apiTask.taskType,
      }));

      setTasks(convertedTasks);
@@ -103,16 +125,12 @@ const ProfileTasks: FunctionComponent = () => {
    reset,
    setError,
    formState: { errors },
-  } = useForm<ITaskForm>({
-    defaultValues: {
-      tags: [],
-    },
-  });
+  } = useForm<ITaskForm>({});

  const example_tags = useMemo(
    () => ({
-      first: Object.keys(subjectChoices),
-      second: Object.keys(taskTypeChoices),
+      first: subjectChoices,
+      second: taskTypeChoices,
    }),
    [subjectChoices, taskTypeChoices]
  );
@@ -122,14 +140,14 @@ const ProfileTasks: FunctionComponent = () => {
      setError("date", { message: "Выберите дату" });
      return;
    }
-    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
-      setError("tags", { message: "Выберите теги" });
+    if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
+      setError("date", { message: "Выберите теги" });
      return;
    }

    try {
-      const selectedSubject = editContent?.tags[0] || tags.first;
-      const selectedTaskType = editContent?.tags[1] || tags.second;
+      const selectedSubject = editContent?.subject.id || tags.first;
+      const selectedTaskType = editContent?.taskType.id || tags.second;

      // Format date to DD-MM-YYYYTHH:MM
      const formattedDate = calendarDate
@@ -148,10 +166,11 @@ const ProfileTasks: FunctionComponent = () => {
      const taskData = {
        title: data.name,
        description: data.description || "",
-        subject: selectedSubject,
-        taskType: selectedTaskType,
+        subject_id: selectedSubject,
+        taskType_id: selectedTaskType,
        dateTime_due: formattedDate,
-        telegram_notifications: false,
+        priority: selectedPriority,
+        telegram_notifications: true,
      };

      if (isCreating) {
@@ -171,13 +190,22 @@ const ProfileTasks: FunctionComponent = () => {

        if (!response.success) {
          throw new Error(response.message);
-        }
+        } else if (isEdit)
+          setEditContent({
+            name: response.task.title,
+            id: response.task.id.toString(),
+            description: response.task.description,
+            priority: response.task.priority,
+            checked: response.task.isCompleted,
+            subject: response.task.subject,
+            taskType: response.task.task_type,
+            date: new Date(response.task.dateTime_due),
+          });
      }

      await fetchTasks();
-
      if (isCreating) setIsOpen(false);
-      setTags({ first: "", second: "", overdue: false });
+      setTags({ first: 0, second: 0, overdue: false });
    } catch (error) {
      console.error("Failed to save task:", error);
    }
@@ -192,15 +220,16 @@ const ProfileTasks: FunctionComponent = () => {
      name: "",
      description: "",
      date: "",
-      tags: [],
+      priority: 4,
      checked: false,
    });
+    setSelectedPriority(4);
  }, [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];
+    if (tags.first) newEditContent.subject = subjectChoices.find((choice) => choice.id === tags.first)!;
+    if (tags.second) newEditContent.taskType = taskTypeChoices.find((choice) => choice.id === tags.second)!;
    setEditContent(newEditContent);
  }, [tags]);

@@ -304,8 +333,8 @@ const ProfileTasks: FunctionComponent = () => {
    if (filterTags.first || filterTags.second) {
      filtered = filtered.filter(
        (task) =>
-          (!filterTags.first || task.tags[0] === filterTags.first) &&
-          (!filterTags.second || task.tags[1] === filterTags.second)
+          (!filterTags.first || task.subject.id === filterTags.first) &&
+          (!filterTags.second || task.taskType.id === filterTags.second)
      );
    }

@@ -326,11 +355,12 @@ const ProfileTasks: FunctionComponent = () => {
      const task: ITask = {
        id: taskId,
        name: taskDetails.title,
+        priority: taskDetails.priority,
        checked: false,
        date: new Date(taskDetails.dateTime_due),
        description: taskDetails.description,
-        tags: [taskDetails.subject, taskDetails.taskType],
-        new: false,
+        subject: taskDetails.subject,
+        taskType: taskDetails.task_type,
      };

      setIsOpen(true);
@@ -338,6 +368,7 @@ const ProfileTasks: FunctionComponent = () => {
      setEditContent(task);
      setCalendarDate(task.date);
      setIsEditModal(false);
+      setSelectedPriority(task.priority);
    } catch (error) {
      console.error("Failed to fetch task details:", error);
    }
@@ -345,33 +376,6 @@ const ProfileTasks: FunctionComponent = () => {

  return (
    <div class={classes.container}>
-      {isLoading ? (
-        <div class="flex w-full flex-1 items-center justify-center">
-          <div class="text-2xl">Загрузка...</div>
-        </div>
-      ) : (
-        <ModalTags
-          zIndex={70}
-          isOpen={openModalTags}
-          setIsOpen={setOpenModalTags}
-          tagsList={example_tags}
-          value={tags}
-          onClose={() => {
-            if (!isCreating) setTags({ first: "", second: "", overdue: false });
-          }}
-          onChange={setTags}
-        />
-      )}
-      <ModalCalendar
-        zIndex={80}
-        isOpen={openModalCalendar}
-        setIsOpen={setOpenModalCalendar}
-        onClose={() => {
-          if (isEdit && !isEditModal) setCalendarDate(null);
-        }}
-        onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
-        value={calendarDate!}
-      />
      <ModalWindow
        zIndex={60}
        isOpen={openModal}
@@ -381,7 +385,7 @@ const ProfileTasks: FunctionComponent = () => {
          setEditContent(null);
          setIsCreating(false);
          setIsEditModal(false);
-          setTags({ first: "", second: "", overdue: false });
+          setTags({ first: 0, second: 0, overdue: false });
          setCalendarDate(null);
        }}
      >
@@ -417,6 +421,7 @@ const ProfileTasks: FunctionComponent = () => {
                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
                  })}
                />
+
                <input
                  type="datetime-local"
                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
@@ -459,7 +464,6 @@ const ProfileTasks: FunctionComponent = () => {
            {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", {
@@ -479,7 +483,7 @@ const ProfileTasks: FunctionComponent = () => {
                    year: "numeric",
                    hour: "2-digit",
                    minute: "2-digit",
-                  }).format(calendarDate!)}
+                  }).format(calendarDate ?? editContent.date)}
                </p>
              </div>
              <div
@@ -488,19 +492,28 @@ const ProfileTasks: FunctionComponent = () => {
                })}
                onClick={() => {
                  if (!isEditModal) return;
-                  setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
+                  setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
                  setOpenModalTags(true);
                }}
              >
                <p class="flex flex-row gap-2">
                  <BookOpenIcon class="size-5" />
-                  {editContent.tags[0]}
+                  {editContent.subject.name}
                </p>
                <p class="flex flex-row gap-2">
                  <DocumentDuplicateIcon class="size-5" />
-                  {editContent.tags[1]}
+                  {editContent.taskType.name}
                </p>
              </div>
+              <Dropdown
+                disabled={!isEditModal}
+                pt={DropdownStyles}
+                options={priorities}
+                value={selectedPriority}
+                onChange={(e) => setSelectedPriority(e.value)}
+                itemTemplate={selectedPriorityTemplate}
+                valueTemplate={selectedPriorityTemplate}
+              />
            </div>
          </form>
        )}
@@ -509,7 +522,7 @@ const ProfileTasks: FunctionComponent = () => {
            class="flex h-full w-full flex-col items-start justify-between"
            onSubmit={(e) => {
              e.preventDefault();
-              handleSubmit((data) => saveTask({ ...data, id: uuid() }))();
+              handleSubmit((data) => saveTask(data))();
            }}
          >
            <div class="flex w-full flex-1 flex-row items-start justify-between">
@@ -532,6 +545,14 @@ const ProfileTasks: FunctionComponent = () => {
                  hidden
                  {...register("date")}
                />
+                <Dropdown
+                  pt={DropdownStyles}
+                  options={priorities}
+                  value={selectedPriority}
+                  onChange={(e) => setSelectedPriority(e.value)}
+                  itemTemplate={selectedPriorityTemplate}
+                  valueTemplate={selectedPriorityTemplate}
+                />
                <input type="checkbox" checked={false} hidden {...register("checked")} />
              </div>
              <div class="flex flex-col gap-3 self-start md:flex-row">
@@ -547,7 +568,6 @@ const ProfileTasks: FunctionComponent = () => {
            </div>
            {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"
@@ -564,15 +584,42 @@ const ProfileTasks: FunctionComponent = () => {
          </form>
        )}
      </ModalWindow>
+      {isLoading ? (
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
+      ) : (
+        <>
+          <ModalTags
+            refreshTags={fetchTags}
+            zIndex={70}
+            isOpen={openModalTags}
+            setIsOpen={setOpenModalTags}
+            tagsList={example_tags}
+            value={tags}
+            onClose={() => {
+              if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
+            }}
+            onChange={setTags}
+          />
+          <ModalCalendar
+            zIndex={80}
+            isOpen={openModalCalendar}
+            setIsOpen={setOpenModalCalendar}
+            onClose={() => {
+              if (isEdit && !isEditModal) setCalendarDate(null);
+            }}
+            onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
+            value={calendarDate!}
+          />
          <Dialog
            isOpen={showDeleteDialog}
            setIsOpen={setShowDeleteDialog}
            title="Удаление задачи"
-        content="Вы уверены, что хотите удалить эту задачу?"
            onConfirm={handleDeleteTask}
            confirmText="Удалить"
            cancelText="Отмена"
-      />
+          >
+            <p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
+          </Dialog>
          {!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
            filteredTasks.length > 0 ? (
              <>
@@ -610,6 +657,7 @@ const ProfileTasks: FunctionComponent = () => {
                        <Task
                          name={task.name}
                          key={task.id}
+                          priority={task.priority}
                          checked={task.checked}
                          overdue={task.date < new Date()}
                          onClick={() => handleViewTask(task.id)}
@@ -626,6 +674,7 @@ const ProfileTasks: FunctionComponent = () => {
                      {groupTasksByDate.tomorrow.map((task) => (
                        <Task
                          name={task.name}
+                          priority={task.priority}
                          key={task.id}
                          checked={task.checked}
                          onClick={() => handleViewTask(task.id)}
@@ -640,6 +689,7 @@ const ProfileTasks: FunctionComponent = () => {
                      {group.tasks.map((task) => (
                        <Task
                          name={task.name}
+                          priority={task.priority}
                          key={task.id}
                          checked={task.checked}
                          onClick={() => handleViewTask(task.id)}
@@ -651,7 +701,10 @@ const ProfileTasks: FunctionComponent = () => {
                </div>
              </>
            ) : (
+              <div class="my-auto flex h-full w-full flex-col items-center justify-start">
+                <img src={MainSvg} />
                <div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
+              </div>
            )
          ) : (
            <div class={classes.tasks_container}>
@@ -686,6 +739,7 @@ const ProfileTasks: FunctionComponent = () => {
                filteredTasks.map((task) => (
                  <Task
                    name={task.name}
+                    priority={task.priority}
                    key={task.id}
                    checked={task.checked}
                    overdue={task.date < new Date()}
@@ -710,6 +764,7 @@ const ProfileTasks: FunctionComponent = () => {
            >
              <PlusIcon />
            </div>
+            {tasks.length > 0 && (
              <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)]"
@@ -732,6 +787,7 @@ const ProfileTasks: FunctionComponent = () => {
                  />
                </div>
              </div>
+            )}
          </div>
          {openSearchModal && (
            <div class="fixed bottom-28 z-50 w-full rounded-lg bg-white p-4 shadow-lg md:absolute md:right-[24rem] md:mx-0 md:w-80">
@@ -817,30 +873,32 @@ const ProfileTasks: FunctionComponent = () => {
                      }}
                    >
                      <BookOpenIcon class="size-5" />
-                  <span>{filterTags.first || "Предмет"}</span>
+                      <span>{subjectChoices.find((s) => s.id === filterTags.first)?.name || "Предмет"}</span>
                    </div>
                    {openFirstList && (
-                  <div class="absolute top-full right-0 z-50 w-64 rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
-                    {example_tags.first.map((tag) => (
+                      <div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
+                        {example_tags.first.map((tag) => {
+                          return (
                            <div
-                        key={tag}
+                              key={`subject_${tag.id}`}
                              class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
                              onClick={() => {
-                          setFilterTags({ ...filterTags, first: tag });
+                                setFilterTags({ ...filterTags, first: tag.id });
                                setOpenFirstList(false);
                              }}
                            >
                              <div
                                class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
-                            "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag,
-                            "border-[#D4D4D4]": filterTags.first !== tag,
+                                  "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag.id,
+                                  "border-[#D4D4D4]": filterTags.first !== tag.id,
                                })}
                              >
-                          {filterTags.first === tag && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
+                                {filterTags.first === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
                              </div>
-                        <span class="text-sm font-medium text-[#404040]">{tag}</span>
+                              <span class="text-sm font-medium text-[#404040]">{tag.name}</span>
                            </div>
-                    ))}
+                          );
+                        })}
                      </div>
                    )}
                  </div>
@@ -859,28 +917,28 @@ const ProfileTasks: FunctionComponent = () => {
                      }}
                    >
                      <DocumentDuplicateIcon class="size-5" />
-                  <span>{filterTags.second || "Задача"}</span>
+                      <span>{taskTypeChoices.find((s) => s.id === filterTags.second)?.name || "Задача"}</span>
                    </div>
                    {openSecondList && (
-                  <div class="absolute top-full right-0 z-50 w-64 rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
+                      <div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
                        {example_tags.second.map((tag) => (
                          <div
-                        key={tag}
+                            key={`taskType_${tag.id}`}
                            class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
                            onClick={() => {
-                          setFilterTags({ ...filterTags, second: tag });
+                              setFilterTags({ ...filterTags, second: tag.id });
                              setOpenSecondList(false);
                            }}
                          >
                            <div
                              class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
-                            "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.second === tag,
-                            "border-[#D4D4D4]": filterTags.second !== tag,
+                                "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.second === tag.id,
+                                "border-[#D4D4D4]": filterTags.second !== tag.id,
                              })}
                            >
-                          {filterTags.second === tag && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
+                              {filterTags.second === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
                            </div>
-                        <span class="text-sm font-medium text-[#404040]">{tag}</span>
+                            <span class="text-sm font-medium text-[#404040]">{tag.name}</span>
                          </div>
                        ))}
                      </div>
@@ -891,7 +949,7 @@ const ProfileTasks: FunctionComponent = () => {
                    <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: "", overdue: false });
+                        setFilterTags({ first: 0, second: 0, overdue: false });
                        setOpenFirstList(false);
                        setOpenSecondList(false);
                      }}
@@ -903,6 +961,8 @@ const ProfileTasks: FunctionComponent = () => {
              </div>
            </div>
          )}
+        </>
+      )}
    </div>
  );
 };
--- a/src/services/avatar-pic.ts
+++ b/src/services/avatar-pic.ts
@@ -0,0 +1,21 @@
+import Status1 from "@/assets/status/1.png";
+import Status2 from "@/assets/status/2.png";
+import Status3 from "@/assets/status/3.png";
+import Status4 from "@/assets/status/4.png";
+import Status5 from "@/assets/status/5.png";
+export const getAvatarPicUrl = (status: string) => {
+  switch (true) {
+    case status.includes("точно"):
+      return Status1;
+    case status.includes("плана нет"):
+      return Status2;
+    case status.includes("прокрастинации"):
+      return Status3;
+    case status.includes("3000"):
+      return Status4;
+    case status.includes("планирования"):
+      return Status5;
+    default:
+      return Status1;
+  }
+};
Author	SHA1	Message	Date
Sergey Elpashev	f6b19767f2	feat: calendar circle colors	2025-05-15 16:36:15 +03:00
Sergey Elpashev	049e6dd912	feat: fixed tags	2025-05-12 19:50:02 +03:00
Sergey Elpashev	c72ce9baa4	feat: avatars	2025-05-12 16:16:26 +03:00
Sergey Elpashev	ac1b7338f8	feat: nice isLoading view	2025-05-12 15:59:16 +03:00
Sergey Elpashev	ae1e0ad0c0	feat: priority select in calendar	2025-05-12 15:39:50 +03:00
Sergey Elpashev	2d2d5699a3	feat: tg bot link	2025-05-12 02:36:20 +03:00
Sergey Elpashev	d0cb13a7f1	fix: removed console logs	2025-05-12 01:51:34 +03:00
Sergey Elpashev	4ad7a00535	feat: small text fix	2025-05-12 01:46:34 +03:00
Sergey Elpashev	19ce2bf278	feat: tag delete	2025-05-12 01:43:10 +03:00
Sergey Elpashev	95a264f5a4	feat: creating tasks	2025-05-12 01:04:33 +03:00
Sergey Elpashev	dca682ac1e	feat: tasks priorities	2025-05-12 00:02:22 +03:00
Sergey Elpashev	d61b1ccffe	feat: added if empty pic	2025-05-12 00:00:54 +03:00
Sergey Elpashev	32984642e5	feat: new tag system	2025-05-11 22:53:52 +03:00