feat: avatars

feat: nice isLoading view
feat: priority select in calendar
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 · 2025-05-12 01:51:34 +03:00 · 2025-05-12 01:46:34 +03:00
28 changed files with 1690 additions and 397 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,5 +9,6 @@
      "[\"'`]([^\"'`]*).*?[\"'`]"
    ]
  ],
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
  "editor.tabSize": 2
 }
--- 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/app.tsx
+++ b/src/app.tsx
@@ -5,6 +5,7 @@ import { addLocale, locale, PrimeReactProvider } from "primereact/api";
 import { useMountEffect } from "primereact/hooks";
 import Page404 from "./pages/404";
 import LoginPage from "./pages/login";
 import RegisterPage from "./pages/register";
 import { AppProvider, useAppContext } from "./providers/AuthProvider";
 const HomePage: FunctionComponent = () => {
@@ -32,6 +33,7 @@ export function App() {
            <Router>
              <Route path="/" component={HomePage} />
              <Route path="/login" component={LoginPage} />
              <Route path="/register" component={RegisterPage} />
              <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
              <Route default component={() => <Page404 />} />
            </Router>
--- 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
@@ -0,0 +1,208 @@
 import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
 import { EyeIcon, EyeSlashIcon, XCircleIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import {
  InputSwitch,
  InputSwitchPassThroughMethodOptions,
  InputSwitchPassThroughOptions,
 } from "primereact/inputswitch";
 import { SubmitHandler, useForm } from "react-hook-form";
 import Button from "./ui/Button";
 import ModalWindow, { ModalWindowProps } from "./ui/Modal";
 interface ISettings {
  login: string;
  oldPassword: string;
  newPassword: string;
  tgId: string;
 }
 export interface IAPIResponse {
  profile: IAPIProfile;
 }
 export interface IAPIProfile {
  username: string;
  email: string;
  status: string;
  avatar_url: string;
  telegram_notifications: boolean;
  telegram_chat_id: string;
 }
 export interface IAPIUpdateSettingsResponse {
  success: boolean;
  username: string;
  email: string;
  avatar_url: string;
  password_changed: boolean;
 }
 const SwitchStyles: InputSwitchPassThroughOptions = {
  root: ({ props }: InputSwitchPassThroughMethodOptions) => ({
    className: cn("inline-block relative", "w-12 h-7", {
      "opacity-60 select-none pointer-events-none cursor-default": props.disabled,
    }),
  }),
  input: {
    className: cn("absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"),
  },
  slider: ({ props }: InputSwitchPassThroughMethodOptions) => ({
    className: cn(
      "absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent",
      "transition-colors duration-200 rounded-2xl",
      "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
      "before:absolute before:content-'' before:top-1/2 before:bg-white  before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
      {
        "bg-gray-200 hover:bg-gray-300": !props.checked,
        "bg-[rgba(251,194,199,0.53)] before:transform before:translate-x-5": props.checked,
      }
    ),
  }),
 };
 const ModalSettings: FunctionComponent<ModalWindowProps> = ({ isOpen, setIsOpen, onClose, ...rest }) => {
  const { handleSubmit, register, setValue, reset } = useForm<ISettings>({
    defaultValues: {
      login: "",
      oldPassword: "",
      newPassword: "",
    },
    mode: "onChange",
  });
  const changeSettings: SubmitHandler<ISettings> = async (data: ISettings) => {
    interface IReq {
      username?: string;
      current_password?: string;
      password?: string;
    }
    const req: IReq = {
      username: data.login || undefined,
      current_password: data.oldPassword || undefined,
      password: data.newPassword || undefined,
    };
    const response = await apiClient<IAPIUpdateSettingsResponse>("/api/settings/edit_profile/", {
      method: "PATCH",
      body: JSON.stringify(req),
    });
    if (!response.success) console.error("Error changing settings");
    if (enableNotification && data.tgId) {
      await apiClient("/api/settings/save_chat_id/", {
        method: "PATCH",
        body: JSON.stringify({ telegram_chat_id: data.tgId }),
      });
      if (oldEnabledNotif !== enableNotification) {
        await apiClient("/api/settings/toggle_telegram_notifications/", { method: "PATCH" });
      }
    }
    handleClose();
  };
  const [enableNotification, setEnableNotification] = useState(false);
  const [login, setLogin] = useState("");
  const [showOldPassword, setShowOldPassword] = useState(false);
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [oldEnabledNotif, setOldEnabledNotif] = useState(false);
  const [tgId, setTgId] = useState("");
  useEffect(() => {
    const getSettings = async () => {
      const response = await apiClient<IAPIResponse>("/api/settings/view_settings/", { method: "GET" });
      setEnableNotification(response.profile.telegram_notifications);
      setOldEnabledNotif(response.profile.telegram_notifications);
      setLogin(response.profile.username);
      setTgId(response.profile.telegram_chat_id);
    };
    if (isOpen) getSettings();
  }, [isOpen]);
  const handleClose = () => {
    setIsOpen!(false);
    setEnableNotification(false);
    reset();
    if (onClose) onClose();
  };
  return (
    <ModalWindow setIsOpen={setIsOpen} isOpen={isOpen} onClose={handleClose} {...rest} className="h-fit! md:w-[40%]!">
      <form onSubmit={handleSubmit(changeSettings)} class="flex w-full flex-col gap-4">
        <div class="flex flex-col items-start gap-2">
          <span class="ms-5 text-sm">Имя</span>
          <div class="flex w-full flex-row items-center rounded-[4rem] bg-[rgba(251,194,199,0.53)] px-5 py-3 leading-8">
            <input class="flex-1 outline-0" {...register("login")} placeholder={login} />
            <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("login", "")} />
          </div>
        </div>
        <div class="flex flex-col items-start gap-2">
          <span class="ms-5 text-sm">Старый пароль</span>
          <div class="flex w-full flex-row items-center gap-1 rounded-[4rem] bg-[rgba(251,194,199,0.53)] px-5 py-3 leading-8">
            <input
              class="flex-1 outline-0"
              {...register("oldPassword")}
              placeholder="Старый пароль"
              type={showOldPassword ? "text" : "password"}
            />
            {showOldPassword ? (
              <EyeIcon class="size-6 cursor-pointer" onClick={() => setShowOldPassword(false)} />
            ) : (
              <EyeSlashIcon class="size-6 cursor-pointer" onClick={() => setShowOldPassword(true)} />
            )}
            <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("oldPassword", "")} />
          </div>
        </div>
        <div class="flex flex-col items-start gap-2">
          <span class="ms-5 text-sm">Новый пароль</span>
          <div class="flex w-full flex-row items-center gap-1 rounded-[4rem] bg-[rgba(251,194,199,0.53)] px-5 py-3 leading-8">
            <input
              class="flex-1 outline-0"
              {...register("newPassword", {
                minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
              })}
              placeholder="Новый пароль"
              type={showNewPassword ? "text" : "password"}
            />
            {showNewPassword ? (
              <EyeIcon class="size-6 cursor-pointer" onClick={() => setShowNewPassword(false)} />
            ) : (
              <EyeSlashIcon class="size-6 cursor-pointer" onClick={() => setShowNewPassword(true)} />
            )}
            <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("newPassword", "")} />
          </div>
        </div>
        <div class="flex flex-row items-center justify-between rounded-[4rem] px-5 py-4 ring-3 ring-[rgba(251,194,199,0.53)]">
          <span>Уведомления</span>
          <InputSwitch
            pt={SwitchStyles}
            checked={enableNotification}
            onChange={(e) => setEnableNotification(e.value)}
          />
        </div>
        <div class={cn({ hidden: !enableNotification })}>
          <div class="flex flex-col items-start gap-2">
            <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", "")} />
            </div>
          </div>
        </div>
        <Button type="submit">Сохранить</Button>
      </form>
    </ModalWindow>
  );
 };
 ModalSettings.displayName = "ModalSettings";
 export default ModalSettings;
--- a/src/components/ModalTags.tsx
+++ b/src/components/ModalTags.tsx
@@ -1,13 +1,17 @@
 import { IAPITag } 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;
+  first: number;
-  second: string;
+  second: number;
  overdue: boolean;
 }
@@ -18,9 +22,10 @@ interface ModalTagsProps extends ModalWindowProps {
  value?: ITags;
  onChange?: Dispatch<StateUpdater<ITags>>;
  tagsList?: {
-    first: string[];
+    first: IAPITag[];
-    second: string[];
+    second: IAPITag[];
  };
  refreshTags: () => void;
 }
 const ModalTags: FunctionComponent<ModalTagsProps> = ({
@@ -30,103 +35,234 @@ 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) {
      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) {
      refreshTags();
    } else {
      setShowErrorDialog(true);
      const match = response.error?.match(/\[(.+)\]/);
      if (match) setErrorMessage(match[1].split(", ").map((s) => s.trim().replace(/'/g, "")));
    }
  };
  return (
-    <ModalWindow
+    <>
-      isOpen={isOpen}
+      <Dialog
-      {...rest}
+        isOpen={showErrorDialog}
-      setIsOpen={setIsOpen}
+        setIsOpen={setShowErrorDialog}
-      onClose={() => {
+        title="Ошибка!"
-        onClose!();
+        confirmation={false}
-        setShowFirstTags(false);
+        cancelText="Ок"
-        setShowSecondTags(false);
+      >
-      }}
+        <div class="flex flex-col items-start gap-1">
-      className="relative h-[14rem] justify-between py-4 md:h-[14rem] md:w-[25rem]"
+          <p class="mb-6 text-sm sm:text-[1rem]">
-      zIndex={70}
+            Данный тег есть в других задачах. Поменяйте теги в них и повторите операцию.
-    >
+          </p>
-      <p class="text-2xl font-semibold">Теги</p>
+          <p class="text-sm sm:text-[1rem]">Задачи с этим тегом:</p>
-      <div class="flex w-[85%] flex-col gap-2 md:w-full">
+          <ul class="ms-6 list-disc">
-        <Button
+            {errorMessage.map((s, i) => (
-          className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]!"
+              <li key={i}>{s}</li>
-          onClick={() => setShowFirstTags(!showFirstTags)}
+            ))}
-        >
+          </ul>
-          <BookOpenIcon class="size-6" />
+        </div>
-          {value?.first || "Предмет"}
+      </Dialog>
-        </Button>
+      <ModalWindow
-        <Button
+        isOpen={isOpen}
-          className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]! break-words"
+        {...rest}
-          onClick={() => setShowSecondTags(!showSecondTags)}
+        setIsOpen={setIsOpen}
-        >
+        onClose={() => {
-          <DocumentDuplicateIcon class="size-6" />
+          onClose!();
-          {value?.second || "Тема"}
+          setShowFirstTags(false);
-        </Button>
+          setShowSecondTags(false);
-        {showFirstTags && (
+          setShowAddFirstTag(false);
-          <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">
+          setShowAddSecondTag(false);
-            <div class="flex h-fit max-h-[45vh] w-full flex-col gap-3 overflow-y-auto">
+        }}
-              {tagsList?.first.map((tag) => (
+        className="relative h-[14rem] justify-between py-4 md:h-[14rem] md:w-[25rem]"
-                <div
+        zIndex={70}
-                  class="flex cursor-pointer flex-row gap-2"
+      >
-                  onClick={() =>
+        <p class="text-2xl font-semibold">Теги</p>
-                    onChange?.((prev) => {
+        <div class="flex w-[85%] flex-col gap-2 md:w-full">
-                      return { ...prev, first: tag };
+          <Button
-                    })
+            className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]!"
-                  }
+            onClick={() => {
-                >
+              setShowFirstTags(!showFirstTags);
              setShowSecondTags(false);
              setShowAddFirstTag(false);
              setShowAddSecondTag(false);
            }}
          >
            <BookOpenIcon class="size-6" />
            {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);
              setShowFirstTags(false);
              setShowAddFirstTag(false);
              setShowAddSecondTag(false);
            }}
          >
            <DocumentDuplicateIcon class="size-6" />
            {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 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={cn(
+                    class="flex cursor-pointer flex-row items-center gap-2"
-                      "pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
+                    onClick={() =>
-                      {
+                      onChange?.((prev) => {
-                        "bg-black": value?.first === tag,
+                        return { ...prev, first: tag.id };
-                      }
+                      })
-                    )}
+                    }
                  >
-                    ✓
+                    <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.id,
                        }
                      )}
                    >
                      ✓
                    </div>
                    <p class="flex-1">{tag.name}</p>
                    <XMarkIcon
                      class="size-4 cursor-pointer"
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDeleteTag(tag.id);
                      }}
                    />
                  </div>
-                  <p>{tag}</p>
+                ))}
-                </div>
+                <button
-              ))}
+                  class="mt-2 flex w-full cursor-pointer flex-row items-center gap-2"
-            </div>
+                  onClick={() => {
-          </div>
+                    setShowAddFirstTag(!showAddFirstTag);
-        )}
+                    setTimeout(() => addFirstTagRef.current?.focus(), 100);
-        {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
+                  <PlusCircleIcon class="size-5" />
-                    class={cn(
+                  <span>Добавить</span>
-                      "pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
+                </button>
-                      {
+              </div>
-                        "bg-black": value?.second === tag,
+              {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>
                  <p>{tag}</p>
                </div>
-              ))}
+              )}
            </div>
-          </div>
+          )}
-        )}
+          {showSecondTags && (
-      </div>
+            <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">
-    </ModalWindow>
+              <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.id };
                      })
                    }
                  >
                    <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.id,
                        }
                      )}
                    >
                      ✓
                    </div>
                    <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,11 +1,26 @@
 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 { calculatePoints, getCurrentStatus } from "@/utils/status-system";
+
-import { useEffect, useState } from "preact/hooks";
+interface UserProfile {
  username: string;
  email: string;
  status: string;
  avatar_url: string | null;
  telegram_notifications: boolean;
  telegram_chat_id: string;
 }
 interface UserSettings {
  profile: UserProfile;
 }
 interface MenuItemProps {
  title: string;
@@ -36,34 +51,29 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuI
  );
 };
 const Avatar: FunctionComponent = () => {
  const [status, setStatus] = useState("");
  const [username, setUsername] = useState("");
  const { route, path } = useLocation();
  const { isLoggedIn } = useAppContext();
  useEffect(() => {
-    const updateStatus = () => {
+    const fetchUserData = async () => {
-      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      try {
-      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+        const response = await apiClient<UserSettings>("/api/settings/view_settings/", { method: "GET" }, isLoggedIn);
-      const points = calculatePoints(completedTasks);
+        setUsername(response.profile.username);
-      setStatus(getCurrentStatus(points));
+        setStatus(response.profile.status);
-    };
+      } catch (error) {
-
+        console.error("Failed to fetch user data:", error);
    // 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 (
+    if (isLoggedIn.value) {
      fetchUserData();
    }
  }, [isLoggedIn.value]);
  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", {
@@ -75,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">никнейм</p>
+          <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) => {
@@ -51,7 +63,7 @@ const Task: FunctionComponent<TaskProps> = ({
          <p class={markStyle({ checked })}>✓</p>
        </div>
        {name}
-        {overdue && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
+        {overdue && !checked && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
      </div>
    </div>
  );
--- 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,
+  children,
-  onConfirm,
+  onConfirm = () => {},
  confirmText = "Подтвердить",
  cancelText = "Отмена",
  confirmation = true,
 }) => {
  if (!isOpen) return null;
@@ -26,20 +27,28 @@ 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">
-          <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
+          {confirmation ? (
-            {cancelText}
+            <>
-          </Button>
+              <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
-          <Button
+                {cancelText}
-            onClick={() => {
+              </Button>
-              onConfirm();
+              <Button
-              setIsOpen(false);
+                onClick={() => {
-            }}
+                  onConfirm();
-            color="red"
+                  setIsOpen(false);
-          >
+                }}
-            {confirmText}
+                color="red"
-          </Button>
+              >
                {confirmText}
              </Button>
            </>
          ) : (
            <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
              {cancelText}
            </Button>
          )}
        </div>
      </div>
    </div>
--- a/src/enums/urls.ts
+++ b/src/enums/urls.ts
@@ -4,4 +4,5 @@ export enum UrlsTitle {
  TASKS = "Задачи",
  CALENDAR = "Календарь",
  PAGE404 = "404",
  REGISTER = "Регистрация",
 }
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -3,6 +3,7 @@ import Input from "@/components/ui/Input";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import apiClient from "@/services/api";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import "preact/debug";
@@ -10,10 +11,6 @@ import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { ILoginForm } from "./login.dto";
 import classes from "./login.module.scss";
 const testUser = {
  login: "test",
  password: "test",
 };
 const LoginPage: FunctionComponent = () => {
  const { isLoggedIn } = useAppContext();
  const { route } = useLocation();
@@ -25,15 +22,37 @@ const LoginPage: FunctionComponent = () => {
    mode: "onChange",
  });
  const login: SubmitHandler<ILoginForm> = async (data) => {
-    console.log(data);
+    try {
-    if (data.login !== testUser.login || data.password !== testUser.password) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      setError("login", { message: "Неверный логин или пароль" });
+      const response = await apiClient<{ success: boolean; user?: any; error?: string }>(
-      setError("password", { message: "Неверный логин или пароль" });
+        "/api/login/",
-      return;
+        {
          method: "POST",
          body: JSON.stringify({ username: data.login, password: data.password }),
          needsCsrf: true,
        },
        isLoggedIn
      );
      if (response.success) {
        isLoggedIn.value = true;
        localStorage.setItem("loggedIn", "true");
        route("/profile/tasks", true);
      } else {
        const errorMessage = response.error || "Неверный логин или пароль";
        setError("login", { message: errorMessage });
        setError("password", { message: " " });
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (error: any) {
      console.error("Login failed:", error);
      const errorMessage =
        error.message.includes("Authentication failed") || error.message.includes("Invalid credentials")
          ? "Неверный логин или пароль"
          : "Ошибка входа. Попробуйте позже.";
      setError("login", { message: errorMessage });
      setError("password", { message: " " });
    }
    isLoggedIn.value = true;
    localStorage.setItem("loggedIn", "true");
    route("/profile/tasks", true);
  };
  if (isLoggedIn.value) route("/profile/tasks", true);
  return !isLoggedIn.value ? (
@@ -71,6 +90,17 @@ const LoginPage: FunctionComponent = () => {
            Войти
          </Button>
        </form>
        <span class="mt-5 text-center text-xs">
          Еще нет аккаунта?{" "}
          <button
            class="cursor-pointer text-blue-500 underline"
            onClick={() => {
              route("/register", true);
            }}
          >
            Зарегистрироваться
          </button>
        </span>
      </div>
    </div>
  ) : (
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -6,8 +6,16 @@ import ids from "./profile.module.scss";
 const ProfilePage: FunctionComponent = () => {
  const { route } = useLocation();
-  const { isLoggedIn } = useAppContext();
+  const { isLoggedIn, isCheckingAuth } = useAppContext(); // Получаем новый сигнал
-  if (!isLoggedIn.value) route("/login", true);
+
  if (isCheckingAuth.value) {
    return <div class="flex h-screen items-center justify-center">Проверка авторизации...</div>;
  }
  if (!isLoggedIn.value) {
    route("/login", true);
    return <p>Redirecting...</p>; // Заглушка на время редиректа
  }
  return isLoggedIn.value ? (
    <div id={ids.main_container}>
      <div id={ids.router_container}>
--- a/src/pages/profile_calendar.tsx
+++ b/src/pages/profile_calendar.tsx
@@ -5,6 +5,7 @@ import Dialog from "@/components/ui/Dialog";
 import ModalWindow from "@/components/ui/Modal";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
 import {
  BookOpenIcon,
@@ -15,16 +16,24 @@ import {
  TrashIcon,
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { useEffect, useState } from "preact/hooks";
+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 { useForm } from "react-hook-form";
+import { SubmitHandler, useForm } from "react-hook-form";
-import { ITask, ITaskForm } from "./profile_tasks.dto";
+import { priorities } from "./profile_tasks";
-
+import {
-const example_tags: { first: string[]; second: string[] } = {
+  IApiResponse,
-  first: ["Программирование", "Информатика", "Физика", "Математика"],
+  IAPITag,
-  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
+  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",
@@ -57,8 +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<IAPITag[]>([]);
  const [taskTypeChoices, setTaskTypeChoices] = useState<IAPITag[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedPriority, setSelectedPriority] = useState(4);
  const {
    handleSubmit,
@@ -68,26 +81,189 @@ const ProfileCalendar: FunctionComponent = () => {
    formState: { errors },
  } = useForm<ITaskForm>({
    defaultValues: {
-      tags: [],
+      subject: {
        name: "",
        id: 0,
      },
      taskType: {
        name: "",
        id: 0,
      },
    },
  });
  useEffect(() => {
-    const storedTasks = localStorage.getItem("tasks");
+    fetchTasks();
-    if (storedTasks) {
+    fetchTags();
      // 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 = () => {
+
  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/");
      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,
        priority: apiTask.priority,
        subject: apiTask.subject,
        taskType: apiTask.taskType,
        new: false,
      }));
      setTasks(convertedTasks);
    } catch (error) {
      console.error("Failed to fetch tasks:", error);
    } finally {
      setIsLoading(false);
    }
  };
  const example_tags = useMemo(
    () => ({
      first: subjectChoices,
      second: taskTypeChoices,
    }),
    [subjectChoices, taskTypeChoices]
  );
  const saveTask: SubmitHandler<ITaskForm> = async (data) => {
    if (!calendarDate) {
      setError("date", { message: "Выберите дату" });
      return;
    }
    if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
      setError("subject", { message: "Выберите теги" });
      return;
    }
    try {
      const selectedSubject = editContent?.subject.id || tags.first;
      const selectedTaskType = editContent?.taskType.id || tags.second;
      // Format date to DD-MM-YYYYTHH:MM
      const formattedDate = calendarDate
        .toLocaleString("en-GB", {
          day: "2-digit",
          month: "2-digit",
          year: "numeric",
          hour: "2-digit",
          minute: "2-digit",
          hour12: false,
        })
        .replace(",", "T")
        .replace(/\//g, "-")
        .replace("T ", "T");
      const taskData = {
        title: data.name,
        description: data.description || "",
        subject: selectedSubject,
        taskType: selectedTaskType,
        dateTime_due: formattedDate,
        telegram_notifications: false,
        priority: selectedPriority,
      };
      if (!editContent) {
        const response = await apiClient<ICreateTaskResponse>("/api/tasks/create_task/", {
          method: "POST",
          body: JSON.stringify(taskData),
        });
        if (!response.success) {
          throw new Error(response.message);
        }
      } else {
        const response = await apiClient<IEditTaskResponse>(`/api/tasks/edit_task/${editContent.id}/`, {
          method: "PUT",
          body: JSON.stringify(taskData),
        });
        if (!response.success) {
          throw new Error(response.message);
        }
      }
      await fetchTasks();
      setIsOpen(false);
      setTags({ first: 0, second: 0, overdue: false });
    } catch (error) {
      console.error("Failed to save task:", error);
    }
  };
  const handleDeleteTask = async () => {
    if (!editContent) return;
-    setTasks(tasks.filter((task) => task.id !== editContent.id));
+
-    setIsOpen(false);
+    try {
-    setShowDeleteDialog(false);
+      const response = await apiClient<IDeleteTaskResponse>(`/api/tasks/delete_task/${editContent.id}/`, {
        method: "DELETE",
      });
      if (!response.success) {
        throw new Error(response.message);
      }
      await fetchTasks();
      setIsOpen(false);
      setShowDeleteDialog(false);
    } catch (error) {
      console.error("Failed to delete task:", error);
    }
  };
  const handleTaskCheck = async (taskId: string) => {
    try {
      await apiClient(`/api/tasks/toggle_complete_task/${taskId}/`, {
        method: "PATCH",
      });
      setTasks((prevTasks) =>
        prevTasks.map((task) => (task.id === taskId ? { ...task, checked: !task.checked } : task))
      );
    } catch (error) {
      console.error("Failed to mark task:", error);
    }
  };
  const handleViewTask = async (taskId: string) => {
    try {
      const taskDetails = await apiClient<ITaskDetails>(`/api/tasks/view_task/${taskId}/`);
      const task: ITask = {
        id: taskId,
        name: taskDetails.title,
        checked: false,
        date: new Date(taskDetails.dateTime_due),
        description: taskDetails.description,
        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);
    }
  };
  useEffect(() => {
@@ -109,15 +285,12 @@ const ProfileCalendar: FunctionComponent = () => {
    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.first) newEditContent.subject = subjectChoices.find((tag) => tag.id === tags.first)!;
-    if (tags.second) newEditContent.tags = [newEditContent.tags[0], tags.second];
+    if (tags.second) newEditContent.taskType = taskTypeChoices.find((tag) => tag.id === tags.second)!;
    setEditContent(newEditContent);
  }, [tags]);
@@ -175,12 +348,6 @@ const ProfileCalendar: FunctionComponent = () => {
    );
  };
  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",
@@ -189,26 +356,6 @@ const ProfileCalendar: FunctionComponent = () => {
    }).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: "", overdue: false });
  };
  const pt = {
    root: { className: calendarStyles.root },
    input: { root: { className: calendarStyles.input } },
@@ -227,16 +374,23 @@ const ProfileCalendar: FunctionComponent = () => {
    month: { className: calendarStyles.month },
    year: { className: calendarStyles.year },
  };
  if (isLoading)
    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="flex w-full flex-col items-center">
      <ModalTags
        refreshTags={fetchTags}
        isOpen={openModalTags}
        setIsOpen={setOpenModalTags}
        tagsList={example_tags}
        value={tags}
        onClose={() => {
-          setTags({ first: "", second: "", overdue: false });
+          setTags({ first: 0, second: 0, overdue: false });
        }}
        onChange={setTags}
      />
@@ -255,8 +409,9 @@ const ProfileCalendar: FunctionComponent = () => {
        onClose={() => {
          setIsEdit(false);
          setEditContent(null);
          setSelectedPriority(4);
          setIsEditModal(false);
-          setTags({ first: "", second: "", overdue: false });
+          setTags({ first: 0, second: 0, overdue: false });
          setCalendarDate(null);
        }}
      >
@@ -272,7 +427,9 @@ const ProfileCalendar: FunctionComponent = () => {
            <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"
+                  class={cn("w-full p-2 text-2xl outline-0", {
                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
                  })}
                  disabled={!isEditModal}
                  placeholder="Название"
                  {...register("name", {
@@ -281,7 +438,9 @@ const ProfileCalendar: FunctionComponent = () => {
                  })}
                />
                <textarea
-                  class="h-[5rem] w-full resize-none outline-0"
+                  class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
                  })}
                  disabled={!isEditModal}
                  placeholder={isEditModal ? "Описание" : ""}
                  {...register("description", {
@@ -330,7 +489,7 @@ 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>}
+            {errors.subject && <p class="text-red-500">{errors.subject.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", {
@@ -359,19 +518,28 @@ const ProfileCalendar: 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>
        )}
@@ -380,11 +548,12 @@ const ProfileCalendar: FunctionComponent = () => {
        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())}
@@ -403,12 +572,9 @@ const ProfileCalendar: FunctionComponent = () => {
                key={task.id}
                name={task.name}
                checked={task.checked}
-                onClick={() => {
+                priority={task.priority}
-                  setIsOpen(true);
+                overdue={task.date < new Date()}
-                  setIsEdit(true);
+                onClick={() => handleViewTask(task.id)}
                  setEditContent(task);
                  setCalendarDate(task.date);
                }}
                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
@@ -1,74 +1,104 @@
 import ModalSettings from "@/components/ModalSettings";
 import Button from "@/components/ui/Button";
 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 { calculatePoints, getCurrentStatus } from "@/utils/status-system";
 import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import { useEffect, useState } from "preact/hooks";
 import classes from "./profile_settings.module.scss";
 interface UserProfile {
  username: string;
  status: string;
  telegram_notifications: boolean;
  telegram_chat_id: string | null;
  current_xp: string;
  xp_for_next_status: string;
 }
 interface UserSettings {
  profile: UserProfile;
 }
 const ProfileSettings: FunctionComponent = () => {
  const { isLoggedIn } = useAppContext();
  const { route } = useLocation();
-  const [status, setStatus] = useState(0);
+  const [userData, setUserData] = useState<UserProfile>({
-  const maxStatus = 100;
+    username: "",
    status: "",
    current_xp: "",
    xp_for_next_status: "",
    telegram_notifications: false,
    telegram_chat_id: "",
  });
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const fetchUserData = async () => {
    try {
      const response = await apiClient<UserSettings>("/api/settings/view_settings/", { method: "GET" }, isLoggedIn);
      setUserData(response.profile);
    } catch (error) {
      console.error("Failed to fetch user data:", error);
    }
  };
  useEffect(() => {
-    const updateStatus = () => {
+    if (isLoggedIn.value) {
-      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      fetchUserData();
-      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+    }
-      const points = calculatePoints(completedTasks);
+  }, [isLoggedIn.value]);
      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);
  }, []);
  const handleLogout = async () => {
    try {
      await apiClient("/api/settings/logout/", { method: "POST", needsCsrf: true }, isLoggedIn);
      isLoggedIn.value = false;
      localStorage.removeItem("loggedIn");
      localStorage.removeItem("user");
      route("/login", true);
    } catch (error) {
      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">Никнейм</p>
+          <p class="text-4xl font-semibold">{userData.username}</p>
-          <p class="text-2xl font-light">{getCurrentStatus(status)}</p>
+          <p class="text-2xl font-light">{userData.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")}
-              style={{ width: `${(status / maxStatus) * 100}%` }}
+              style={{ width: `${(+userData.current_xp / +userData.xp_for_next_status) * 100}%` }}
            ></div>
          </div>
          <div class="-mt-3 self-end text-sm font-light">
-            {status}/{maxStatus}
+            {userData.current_xp}/{userData.xp_for_next_status}
          </div>
        </div>
      </div>
      <div class={classes.profile_container}>
        <div class={classes.settings_block}>
          <div class={classes.settings_block__buttons}>
-            <Button className="flex flex-row items-center justify-center gap-2">
+            <Button className="flex flex-row items-center justify-center gap-2" onClick={() => setIsSettingsOpen(true)}>
              <Cog8ToothIcon class="size-8" /> Настройки
            </Button>
            <Button
              className="flex flex-row items-center justify-center gap-2 bg-[linear-gradient(180.00deg,rgba(246,255,211,0.7),rgba(195,229,253,0.7)_100%)]"
-              onClick={() => {
+              onClick={handleLogout}
                isLoggedIn.value = false;
                localStorage.setItem("loggedIn", "false");
                route("/login", true);
              }}
            >
              <ArrowRightStartOnRectangleIcon class="size-8" /> Выйти
            </Button>
@@ -79,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,13 +1,99 @@
 export interface IAPITag {
  name: string;
  id: number;
 }
 export interface ITask {
  id: string;
  name: string;
  checked: boolean;
  priority: number;
  date: Date;
  description: string;
-  tags: string[];
+  subject: IAPITag;
-  new?: boolean;
+  taskType: IAPITag;
 }
 export interface ITaskView extends Omit<ITask, "taskType"> {
  task_type: IAPITag;
 }
 export interface ITaskForm extends Omit<ITask, "date"> {
  date: string;
 }
 export interface IApiTask {
  id: number;
  title: string;
  description: string;
  priority: number;
  isCompleted: boolean;
  due_date: string;
  subject: IAPITag;
  taskType: IAPITag;
 }
 export interface IApiResponse {
  profile: string;
  tasks: IApiTask[];
 }
 export interface ICreateTaskResponse {
  success: boolean;
  message: string;
  profile: string;
  task: {
    id: number;
    title: string;
    description: string;
    subject: string;
    taskType: string;
    dateTime_due: string;
    isCompleted: boolean;
    reminder?: {
      remind_before_days: number;
      repeat_interval: number;
      reminder_time: string;
    };
  };
 }
 export interface ITaskDetails {
  profile: string;
  title: string;
  description: string;
  subject: IAPITag;
  task_type: IAPITag;
  priority: number;
  dateTime_due: string;
 }
 export interface IDeleteTaskResponse {
  success: boolean;
  message: string;
 }
 export interface IEditTaskResponse {
  success: boolean;
  message: string;
  profile: string;
  task: {
    id: number;
    title: string;
    description: string;
    subject: string;
    taskType: string;
    dateTime_due: string;
    isCompleted: boolean;
    reminder?: {
      remind_before_days: number;
      repeat_interval: number;
      reminder_time: string;
    };
  };
 }
 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";
@@ -8,6 +9,7 @@ import Dialog from "@/components/ui/Dialog";
 import ModalWindow from "@/components/ui/Modal";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
 import { PlusIcon } from "@heroicons/react/20/solid";
 import {
@@ -23,18 +25,34 @@ 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 { ITask, ITaskForm } from "./profile_tasks.dto";
+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";
-const example_tags: { first: string[]; second: string[] } = {
+export const priorities: SelectItem[] = [
-  first: ["Программирование", "Информатика", "Физика", "Математика"],
+  { label: "Приоритет 1", value: 1 },
-  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
+  { label: "Приоритет 2", value: 2 },
-};
+  { label: "Приоритет 3", value: 3 },
  { label: "Приоритет 4", value: 4 },
 ];
 const ProfileTasks: FunctionComponent = () => {
  const [openModal, setIsOpen] = useState(false); // Открыта модалка
@@ -47,28 +65,60 @@ 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 init_tasks: ITask[] = localStorage.getItem("tasks") ? JSON.parse(localStorage.getItem("tasks") as string) : [];
+  const [tasks, setTasks] = useState<ITask[]>([]);
-  let clear = false;
+  const [subjectChoices, setSubjectChoices] = useState<IAPITag[]>([]);
-  init_tasks.forEach((task) => {
+  const [taskTypeChoices, setTaskTypeChoices] = useState<IAPITag[]>([]);
-    clear = clear || (task.new == undefined ? true : false);
+  const [isLoading, setIsLoading] = useState(true);
-    if (!clear) task.new = true;
+
    task.date = new Date(task.date);
  });
  const [tasks, setTasks] = useState<ITask[]>(clear ? [] : init_tasks);
  useEffect(() => {
-    localStorage.setItem("tasks", JSON.stringify(tasks));
+    fetchTasks();
-  }, [tasks]);
+    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/");
      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,
        subject: apiTask.subject,
        taskType: apiTask.taskType,
      }));
      setTasks(convertedTasks);
    } catch (error) {
      console.error("Failed to fetch tasks:", error);
    } finally {
      setIsLoading(false);
    }
  };
  const {
    handleSubmit,
@@ -78,30 +128,92 @@ const ProfileTasks: FunctionComponent = () => {
    formState: { errors },
  } = useForm<ITaskForm>({
    defaultValues: {
-      tags: [],
+      subject: {
        name: "",
        id: 0,
      },
      taskType: {
        name: "",
        id: 0,
      },
    },
  });
-  const saveTask: SubmitHandler<ITaskForm> = (data) => {
+
  const example_tags = useMemo(
    () => ({
      first: subjectChoices,
      second: taskTypeChoices,
    }),
    [subjectChoices, taskTypeChoices]
  );
  const saveTask: SubmitHandler<ITaskForm> = async (data) => {
    if (!calendarDate) {
      setError("date", { message: "Выберите дату" });
      return;
    }
-    console.log(tags);
+    if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
-    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
+      setError("subject", { message: "Выберите теги" });
      setError("tags", { message: "Выберите теги" });
      return;
    }
-    const eTask: ITask = {
+
-      ...data,
+    try {
-      date: calendarDate,
+      const selectedSubject = editContent?.subject.id || tags.first;
-      tags: editContent?.tags.length ? editContent.tags : [tags.first, tags.second],
+      const selectedTaskType = editContent?.taskType.id || tags.second;
-      new: true,
+
-    };
+      // Format date to DD-MM-YYYYTHH:MM
-    if (isCreating) setTasks([...tasks, eTask]);
+      const formattedDate = calendarDate
-    else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
+        .toLocaleString("en-GB", {
-    if (isCreating) setIsOpen(false);
+          day: "2-digit",
-    setTags({ first: "", second: "", overdue: false });
+          month: "2-digit",
          year: "numeric",
          hour: "2-digit",
          minute: "2-digit",
          hour12: false,
        })
        .replace(",", "T")
        .replace(/\//g, "-")
        .replace("T ", "T");
      const taskData = {
        title: data.name,
        description: data.description || "",
        subject_id: selectedSubject,
        taskType_id: selectedTaskType,
        dateTime_due: formattedDate,
        priority: selectedPriority,
        telegram_notifications: true,
      };
      if (isCreating) {
        const response = await apiClient<ICreateTaskResponse>("/api/tasks/create_task/", {
          method: "POST",
          body: JSON.stringify(taskData),
        });
        if (!response.success) {
          throw new Error(response.message);
        }
      } else {
        const response = await apiClient<IEditTaskResponse>(`/api/tasks/edit_task/${editContent?.id}/`, {
          method: "PUT",
          body: JSON.stringify(taskData),
        });
        if (!response.success) {
          throw new Error(response.message);
        }
      }
      await fetchTasks();
      if (isCreating) setIsOpen(false);
      setTags({ first: 0, second: 0, overdue: false });
    } catch (error) {
      console.error("Failed to save task:", error);
    }
  };
  useEffect(() => {
    if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
    else reset();
@@ -111,15 +223,24 @@ const ProfileTasks: FunctionComponent = () => {
      name: "",
      description: "",
      date: "",
-      tags: [],
+      subject: {
        name: "",
        id: 0,
      },
      taskType: {
        name: "",
        id: 0,
      },
      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.first) newEditContent.subject = subjectChoices.find((choice) => choice.id === tags.first)!;
-    if (tags.second) newEditContent.tags = [newEditContent.tags[0], tags.second];
+    if (tags.second) newEditContent.taskType = taskTypeChoices.find((choice) => choice.id === tags.second)!;
    setEditContent(newEditContent);
  }, [tags]);
@@ -174,17 +295,44 @@ const ProfileTasks: FunctionComponent = () => {
    }).format(date);
  };
-  const handleDeleteTask = () => {
+  const handleDeleteTask = async () => {
    if (!editContent) return;
-    setTasks(tasks.filter((task) => task.id !== editContent.id));
+
-    setIsOpen(false);
+    try {
-    setShowDeleteDialog(false);
+      const response = await apiClient<IDeleteTaskResponse>(`/api/tasks/delete_task/${editContent.id}/`, {
        method: "DELETE",
      });
      if (!response.success) {
        throw new Error(response.message);
      }
      await fetchTasks();
      setIsOpen(false);
      setShowDeleteDialog(false);
    } catch (error) {
      console.error("Failed to delete task:", error);
    }
  };
  const handleMarkTask = async (taskId: string) => {
    try {
      await apiClient(`/api/tasks/toggle_complete_task/${taskId}/`, {
        method: "PATCH",
      });
      setTasks((prevTasks) =>
        prevTasks.map((task) => (task.id === taskId ? { ...task, checked: !task.checked } : task))
      );
    } catch (error) {
      console.error("Failed to mark task:", error);
    }
  };
  const filteredTasks = useMemo(() => {
    let filtered = tasks;
    // Фильтрация по поиску
    if (searchQuery) {
      filtered = filtered.filter(
        (task) =>
@@ -193,16 +341,15 @@ const ProfileTasks: FunctionComponent = () => {
      );
    }
    // Фильтрация по тегам
    if (filterTags.first || filterTags.second) {
      filtered = filtered.filter(
        (task) =>
-          (!filterTags.first || task.tags[0] === filterTags.first) &&
+          (!filterTags.first || task.subject.id === filterTags.first) &&
-          (!filterTags.second || task.tags[1] === filterTags.second)
+          (!filterTags.second || task.taskType.id === filterTags.second)
      );
    }
-    filtered = filtered.filter((task) => (filterTags.overdue ? task.date < new Date() : task.date >= new Date()));
+    filtered = filtered.filter((task) => (filterTags.overdue && !task.checked ? task.date < new Date() : 1));
    return filtered;
  }, [tasks, searchQuery, filterTags]);
@@ -211,16 +358,51 @@ const ProfileTasks: FunctionComponent = () => {
  useEffect(() => {
    if (searchInputRef.current && openSearchModal) searchInputRef.current.focus();
  }, [searchInputRef, openSearchModal]);
  const handleViewTask = async (taskId: string) => {
    try {
      const taskDetails = await apiClient<ITaskDetails>(`/api/tasks/view_task/${taskId}/`);
      const task: ITask = {
        id: taskId,
        name: taskDetails.title,
        priority: taskDetails.priority,
        checked: false,
        date: new Date(taskDetails.dateTime_due),
        description: taskDetails.description,
        subject: taskDetails.subject,
        taskType: taskDetails.task_type,
      };
      setIsOpen(true);
      setIsEdit(true);
      setEditContent(task);
      setCalendarDate(task.date);
      setIsEditModal(false);
      setSelectedPriority(task.priority);
    } catch (error) {
      console.error("Failed to fetch task details:", error);
    }
  };
  if (isLoading)
    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}>
      <ModalTags
        refreshTags={fetchTags}
        zIndex={70}
        isOpen={openModalTags}
        setIsOpen={setOpenModalTags}
        tagsList={example_tags}
        value={tags}
        onClose={() => {
-          if (!isCreating) setTags({ first: "", second: "", overdue: false });
+          if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
        }}
        onChange={setTags}
      />
@@ -243,7 +425,7 @@ const ProfileTasks: FunctionComponent = () => {
          setEditContent(null);
          setIsCreating(false);
          setIsEditModal(false);
-          setTags({ first: "", second: "", overdue: false });
+          setTags({ first: 0, second: 0, overdue: false });
          setCalendarDate(null);
        }}
      >
@@ -279,6 +461,7 @@ const ProfileTasks: FunctionComponent = () => {
                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
                  })}
                />
                <input
                  type="datetime-local"
                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
@@ -321,7 +504,7 @@ 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>}
+            {errors.subject && <p class="text-red-500">{errors.subject.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", {
@@ -350,19 +533,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>
        )}
@@ -394,6 +586,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">
@@ -409,7 +609,7 @@ 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>}
+            {errors.subject?.message && <p class="text-red-500">{errors.subject.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"
@@ -430,11 +630,12 @@ const ProfileTasks: FunctionComponent = () => {
        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 ? (
          <>
@@ -472,17 +673,11 @@ const ProfileTasks: FunctionComponent = () => {
                    <Task
                      name={task.name}
                      key={task.id}
                      priority={task.priority}
                      checked={task.checked}
                      overdue={task.date < new Date()}
-                      onClick={() => {
+                      onClick={() => handleViewTask(task.id)}
-                        setIsOpen(true);
+                      onMarkClick={() => handleMarkTask(task.id)}
                        setIsEdit(true);
                        setEditContent(task);
                        setCalendarDate(task.date);
                      }}
                      onMarkClick={() => {
                        setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
                      }}
                    />
                  ))}
                </div>
@@ -495,17 +690,11 @@ const ProfileTasks: FunctionComponent = () => {
                  {groupTasksByDate.tomorrow.map((task) => (
                    <Task
                      name={task.name}
                      priority={task.priority}
                      key={task.id}
                      checked={task.checked}
-                      onClick={() => {
+                      onClick={() => handleViewTask(task.id)}
-                        setIsOpen(true);
+                      onMarkClick={() => handleMarkTask(task.id)}
                        setIsEdit(true);
                        setEditContent(task);
                        setCalendarDate(task.date);
                      }}
                      onMarkClick={() => {
                        setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
                      }}
                    />
                  ))}
                </div>
@@ -516,17 +705,11 @@ const ProfileTasks: FunctionComponent = () => {
                  {group.tasks.map((task) => (
                    <Task
                      name={task.name}
                      priority={task.priority}
                      key={task.id}
                      checked={task.checked}
-                      onClick={() => {
+                      onClick={() => handleViewTask(task.id)}
-                        setIsOpen(true);
+                      onMarkClick={() => handleMarkTask(task.id)}
                        setIsEdit(true);
                        setEditContent(task);
                        setCalendarDate(task.date);
                      }}
                      onMarkClick={() => {
                        setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
                      }}
                    />
                  ))}
                </div>
@@ -534,7 +717,10 @@ const ProfileTasks: FunctionComponent = () => {
            </div>
          </>
        ) : (
-          <div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</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}>
@@ -569,18 +755,12 @@ const ProfileTasks: FunctionComponent = () => {
            filteredTasks.map((task) => (
              <Task
                name={task.name}
                priority={task.priority}
                key={task.id}
                checked={task.checked}
                overdue={task.date < new Date()}
-                onClick={() => {
+                onClick={() => handleViewTask(task.id)}
-                  setIsOpen(true);
+                onMarkClick={() => handleMarkTask(task.id)}
                  setIsEdit(true);
                  setEditContent(task);
                  setCalendarDate(task.date);
                }}
                onMarkClick={() => {
                  setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
                }}
              />
            ))
          ) : (
@@ -600,28 +780,30 @@ const ProfileTasks: FunctionComponent = () => {
        >
          <PlusIcon />
        </div>
-        <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">
+        {tasks.length > 0 && (
-          <div
+          <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">
-            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)]"
+            <div
-            onClick={(e) => {
+              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)]"
              e.stopPropagation();
              if (!openSearchModal) setOpenFilterModal(false);
              setOpenSearchModal(!openSearchModal);
            }}
          >
            <MagnifyingGlassIcon class="size-12" />
          </div>
          <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)]">
            <FunnelIcon
              class="size-12"
              onClick={(e) => {
                e.stopPropagation();
-                if (!openFilterModal) setOpenSearchModal(false);
+                if (!openSearchModal) setOpenFilterModal(false);
-                setOpenFilterModal(!openFilterModal);
+                setOpenSearchModal(!openSearchModal);
              }}
-            />
+            >
              <MagnifyingGlassIcon class="size-12" />
            </div>
            <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)]">
              <FunnelIcon
                class="size-12"
                onClick={(e) => {
                  e.stopPropagation();
                  if (!openFilterModal) setOpenSearchModal(false);
                  setOpenFilterModal(!openFilterModal);
                }}
              />
            </div>
          </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">
@@ -707,30 +889,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">
+                  <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) => (
+                    {example_tags.first.map((tag) => {
-                      <div
+                      return (
                        key={tag}
                        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 });
                          setOpenFirstList(false);
                        }}
                      >
                        <div
-                          class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
+                          key={`subject_${tag.id}`}
-                            "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag,
+                          class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
-                            "border-[#D4D4D4]": filterTags.first !== tag,
+                          onClick={() => {
-                          })}
+                            setFilterTags({ ...filterTags, first: tag.id });
                            setOpenFirstList(false);
                          }}
                        >
-                          {filterTags.first === tag && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
+                          <div
                            class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
                              "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag.id,
                              "border-[#D4D4D4]": filterTags.first !== tag.id,
                            })}
                          >
                            {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.name}</span>
                        </div>
-                        <span class="text-sm font-medium text-[#404040]">{tag}</span>
+                      );
-                      </div>
+                    })}
                    ))}
                  </div>
                )}
              </div>
@@ -749,28 +933,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-[#FBC2C7] bg-[#FBC2C7]": filterTags.second === tag.id,
-                            "border-[#D4D4D4]": filterTags.second !== tag,
+                            "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>
@@ -781,7 +965,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);
                  }}
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -0,0 +1,132 @@
 import Button from "@/components/ui/Button";
 import Input from "@/components/ui/Input";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import apiClient from "@/services/api";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import "preact/debug";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { ILoginForm } from "./login.dto";
 import classes from "./login.module.scss";
 interface IRegisterForm extends ILoginForm {
  confirmPassword: string;
 }
 const RegisterPage: FunctionComponent = () => {
  const { isLoggedIn } = useAppContext();
  const { route } = useLocation();
  const { control, handleSubmit, formState, setError } = useForm({
    defaultValues: {
      login: "",
      password: "",
      confirmPassword: "",
    },
    mode: "onChange",
  });
  const register: SubmitHandler<IRegisterForm> = async (data) => {
    if (data.password !== data.confirmPassword) {
      setError("confirmPassword", { message: "Пароли не совпадают" });
      return;
    }
    try {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const response = await apiClient<{ success: boolean; user?: any; error?: string }>("/api/register/", {
        method: "POST",
        body: JSON.stringify({ username: data.login, password: data.password }),
        needsCsrf: true,
      });
      if (response.success) {
        route("/login", true);
      } else {
        const errorMessage = response.error || "Неверный логин или пароль";
        setError("login", { message: errorMessage });
        setError("password", { message: " " });
        setError("confirmPassword", { message: " " });
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (error: any) {
      console.error("Register failed:", error);
      const errorMessage = "Ошибка входа. Попробуйте позже.";
      setError("login", { message: errorMessage });
      setError("password", { message: " " });
      setError("confirmPassword", { message: " " });
    }
  };
  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(register)}>
          <Controller
            name="login"
            control={control}
            rules={{
              required: "Введите логин",
              minLength: { value: 3, message: "Логин должен быть не менее 3 символов" },
            }}
            render={({ field }) => (
              <Input placeholder="Логин" textAlign="center" error={formState.errors.login?.message} {...field} />
            )}
          />
          <Controller
            name="password"
            control={control}
            rules={{
              required: "Введите пароль",
              minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
            }}
            render={({ field }) => (
              <Input
                placeholder="Пароль"
                textAlign="center"
                type="password"
                error={formState.errors.password?.message}
                {...field}
              />
            )}
          />
          <Controller
            name="confirmPassword"
            control={control}
            rules={{
              required: "Введите пароль",
              minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
            }}
            render={({ field }) => (
              <Input
                placeholder="Повторите пароль"
                textAlign="center"
                type="password"
                error={formState.errors.confirmPassword?.message}
                {...field}
              />
            )}
          />
          <Button type="submit" color="secondary" className="w-full">
            Зарегистрироваться
          </Button>
        </form>
        <span class="mt-5 text-center text-xs">
          Уже есть аккаунт?{" "}
          <button
            class="cursor-pointer text-blue-500 underline"
            onClick={() => {
              route("/login", true);
            }}
          >
            Войти
          </button>
        </span>
      </div>
    </div>
  ) : (
    <p>Redirecting...</p>
  );
 };
 export default withTitle(UrlsTitle.REGISTER, RegisterPage);
--- a/src/providers/AuthProvider.tsx
+++ b/src/providers/AuthProvider.tsx
@@ -1,20 +1,75 @@
-import { stringToBoolean } from "@/utils/converter";
+import apiClient from "@/services/api";
 import { signal, Signal } from "@preact/signals";
 import { createContext, JSX } from "preact";
-import { useContext } from "preact/hooks";
+import { useContext, useEffect } from "preact/hooks";
 interface UserData {
  id: number;
  username: string;
  email: string;
 }
 interface AuthStatusResponse {
  isAuthenticated: boolean;
  user?: UserData;
 }
 interface AppContextValue {
  isLoggedIn: Signal<boolean>;
  isCheckingAuth: Signal<boolean>;
  currentUser: Signal<UserData | null>;
  checkAuth: () => Promise<void>;
 }
 const ininitialValue = stringToBoolean(localStorage.getItem("loggedIn"));
-const AppContext = createContext<AppContextValue>({
+const initialLoggedIn = localStorage.getItem("loggedIn") === "true";
-  isLoggedIn: signal(ininitialValue),
+
-});
+const AppContext = createContext<AppContextValue | null>(null);
 const AppProvider = ({ children }: { children: JSX.Element }) => {
  const isLoggedIn = signal(initialLoggedIn);
  const isCheckingAuth = signal(true);
  const currentUser = signal<UserData | null>(null);
  const checkAuth = async () => {
    console.log("Checking auth status...");
    isCheckingAuth.value = true;
    try {
      const response = await apiClient<AuthStatusResponse>("/api/auth/status/", {
        method: "GET",
        needsCsrf: false,
      });
      if (response.isAuthenticated && response.user) {
        console.log("User is authenticated:", response.user.username);
        isLoggedIn.value = true;
        currentUser.value = response.user;
        localStorage.setItem("loggedIn", "true");
      } else {
        console.log("User is not authenticated.");
        isLoggedIn.value = false;
        currentUser.value = null;
        localStorage.removeItem("loggedIn");
      }
    } catch (error: any) {
      console.error("Auth check failed:", error.message);
      isLoggedIn.value = false;
      currentUser.value = null;
      localStorage.removeItem("loggedIn");
    } finally {
      isCheckingAuth.value = false;
      console.log("Auth check finished. isLoggedIn:", isLoggedIn.value);
    }
  };
  useEffect(() => {
    checkAuth();
  }, []);
  const value: AppContextValue = {
-    isLoggedIn: signal(ininitialValue),
+    isLoggedIn,
    isCheckingAuth,
    currentUser,
    checkAuth,
  };
  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
@@ -29,3 +84,4 @@ const useAppContext = () => {
 };
 export { AppProvider, useAppContext };
 export type { UserData };
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -0,0 +1,99 @@
 import { Signal } from "@preact/signals";
 function getCookie(name: string): string | null {
  let cookieValue = null;
  if (document.cookie && document.cookie !== "") {
    const cookies = document.cookie.split(";");
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === name + "=") {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
 }
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
 interface RequestOptions extends RequestInit {
  needsCsrf?: boolean;
  isFormData?: boolean;
 }
 async function apiClient<T>(
  endpoint: string,
  options: RequestOptions = {},
  isLoggedInSignal?: Signal<boolean>
 ): Promise<T> {
  const url = `${API_BASE_URL}${endpoint}`;
  const { needsCsrf = true, isFormData = false, ...fetchOptions } = options;
  const headers: HeadersInit = {
    ...(isFormData ? {} : { "Content-Type": "application/json" }),
    Accept: "application/json",
    ...fetchOptions.headers,
  };
  const method = options.method?.toUpperCase() || "GET";
  if (needsCsrf && ["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
    const csrfToken = getCookie("csrftoken");
    if (csrfToken) {
      (headers as Record<string, string>)["X-CSRFToken"] = csrfToken;
    } else {
      console.warn("CSRF token not found in cookies.");
      await fetchCsrfToken(); // Implement this function if needed
      const newCsrfToken = getCookie("csrftoken");
      if (newCsrfToken) {
        (headers as Record<string, string>)["X-CSRFToken"] = newCsrfToken;
      } else {
        throw new Error("CSRF token is missing");
      }
    }
  }
  const config: RequestInit = {
    ...fetchOptions,
    headers,
    credentials: "include",
  };
  try {
    const response = await fetch(url, config);
    if (response.status === 401 || response.status === 403) {
      console.error("Authentication error:", response.status);
      if (isLoggedInSignal) {
        isLoggedInSignal.value = false;
        localStorage.setItem("loggedIn", "false");
      }
      throw new Error(`Authentication failed: ${response.status}`);
    }
    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}));
      console.error("API Error:", response.status, errorData);
      throw new Error(`HTTP error ${response.status}: ${JSON.stringify(errorData) || response.statusText}`);
    }
    if (response.status === 204) {
      return {} as T;
    }
    return (await response.json()) as T;
  } catch (error) {
    console.error("API Client Fetch Error:", error);
    throw error;
  }
 }
 async function fetchCsrfToken() {
  try {
    await apiClient("/api/get-csrf/", { method: "GET", needsCsrf: false });
  } catch (error) {
    console.error("Failed to fetch CSRF token:", error);
  }
 }
 export default apiClient;
--- 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	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
Sergey Elpashev	3addff881b	fix: overdue filter	2025-05-10 15:38:37 +03:00
Sergey Elpashev	f7870e5e00	feat: overdue	2025-05-10 15:27:58 +03:00
Sergey Elpashev	b5c67c6173	feat: profile settings	2025-05-10 14:20:10 +03:00
Sergey Elpashev	e342da34c0	feat: register page	2025-05-10 14:19:41 +03:00
Sergey Elpashev	cc7307a655	feat: get tasks from api in calendar	2025-05-09 15:37:05 +03:00
Sergey Elpashev	cb9e1bd266	feat: mark task change	2025-05-07 11:57:35 +03:00
Sergey Elpashev	1f289e8545	feat: CRUD tasks	2025-05-07 11:24:08 +03:00
Sergey Elpashev	ce694f0be8	feat: show tasks and creating them	2025-05-07 11:14:17 +03:00
Sergey Elpashev	852ac9ad0d	feat: real login and logout	2025-05-07 10:42:23 +03:00
Sergey Elpashev	9ab2a1cb08	feat: input colors and some improvements	2025-05-07 10:26:57 +03:00
Sergey Elpashev	19a6d435b2	hotfix: icon classname in checkbox	2025-05-07 10:26:57 +03:00
Sergey Elpashev	5b5082df38	feat: fix styles in filters	2025-05-07 10:26:57 +03:00
Sergey Elpashev	2c11c3b21a	feat: overdue tasks	2025-05-07 10:26:57 +03:00
Sergey Elpashev	f510c8c415	feat: cannot set previous dates	2025-05-07 10:26:57 +03:00
Sergey Elpashev	a2c1fd16c9	feat: calendar markers on task count	2025-05-07 10:26:57 +03:00
Sergey Elpashev	0055e09806	feat: api client and natural login and logoff	2025-05-05 16:53:18 +03:00