hotfix: mobile create button

feat: status-system
feat: tasks group by date and delete
2025-04-27 14:52:30 +03:00 · 2025-04-27 14:34:10 +03:00 · 2025-04-27 14:05:13 +03:00 · 2025-04-27 14:04:51 +03:00 · 2025-04-27 13:32:17 +03:00 · 2025-04-27 12:20:00 +03:00
31 changed files with 2392 additions and 100 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -8,13 +8,18 @@
        "@preact/signals": "^2.0.2",
        "@tailwindcss/postcss": "^4.0.17",
        "@tailwindcss/vite": "^4.0.17",
+        "@types/uuid": "^10.0.0",
        "clsx": "^2.1.1",
        "postcss": "^8.5.3",
        "preact": "^10.26.2",
        "preact-iso": "^2.9.1",
+        "primelocale": "^2.1.2",
+        "primereact": "^10.9.4",
+        "react-hook-form": "^7.56.1",
        "tailwind-merge": "^3.0.2",
        "tailwind-variants": "^1.0.0",
        "tailwindcss": "^4.0.17",
+        "uuid": "^11.1.0",
      },
      "devDependencies": {
        "@eslint/js": "^9.23.0",
@@ -72,6 +77,8 @@

    "@babel/plugin-transform-react-jsx-development": ["@babel/plugin-transform-react-jsx-development@7.25.9", "", { "dependencies": { "@babel/plugin-transform-react-jsx": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw=="],

+    "@babel/runtime": ["@babel/runtime@7.27.0", "", { "dependencies": { "regenerator-runtime": "^0.14.0" } }, "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw=="],
+
    "@babel/template": ["@babel/template@7.27.0", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/parser": "^7.27.0", "@babel/types": "^7.27.0" } }, "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA=="],

    "@babel/traverse": ["@babel/traverse@7.27.0", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.27.0", "@babel/parser": "^7.27.0", "@babel/template": "^7.27.0", "@babel/types": "^7.27.0", "debug": "^4.3.1", "globals": "^11.1.0" } }, "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA=="],
@@ -272,6 +279,12 @@

    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],

+    "@types/react": ["@types/react@19.1.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw=="],
+
+    "@types/react-transition-group": ["@types/react-transition-group@4.4.12", "", { "peerDependencies": { "@types/react": "*" } }, "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w=="],
+
+    "@types/uuid": ["@types/uuid@10.0.0", "", {}, "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ=="],
+
    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.28.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.28.0", "@typescript-eslint/type-utils": "8.28.0", "@typescript-eslint/utils": "8.28.0", "@typescript-eslint/visitor-keys": "8.28.0", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-lvFK3TCGAHsItNdWZ/1FkvpzCxTHUVuFrdnOGLMa0GGCFIbCgQWVk3CzCGdA7kM3qGVc+dfW9tr0Z/sHnGDFyg=="],

    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.28.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.28.0", "@typescript-eslint/types": "8.28.0", "@typescript-eslint/typescript-estree": "8.28.0", "@typescript-eslint/visitor-keys": "8.28.0", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ=="],
@@ -344,6 +357,8 @@

    "css-what": ["css-what@6.1.0", "", {}, "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="],

+    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
    "debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],

    "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
@@ -356,6 +371,8 @@

    "doctrine": ["doctrine@3.0.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w=="],

+    "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
+
    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],

    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
@@ -520,6 +537,8 @@

    "loglevel-colored-level-prefix": ["loglevel-colored-level-prefix@1.0.0", "", { "dependencies": { "chalk": "^1.1.3", "loglevel": "^1.4.1" } }, "sha512-u45Wcxxc+SdAlh4yeF/uKlC1SPUPCy0gullSNKXod5I4bmifzk+Q4lSLExNEVn19tGaJipbZ4V4jbFn79/6mVA=="],

+    "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
+
    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],

    "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
@@ -542,6 +561,8 @@

    "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],

+    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
+
    "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],

    "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
@@ -582,14 +603,28 @@

    "pretty-format": ["pretty-format@29.7.0", "", { "dependencies": { "@jest/schemas": "^29.6.3", "ansi-styles": "^5.0.0", "react-is": "^18.0.0" } }, "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ=="],

+    "primelocale": ["primelocale@2.1.2", "", {}, "sha512-sTDkqu/QBwpqzq86oZGXaU/QbPLKLZ3Qix2gbqHXr410B7tfQCx39HSWjM9Hsnpzqn9KVdXJzk1DH1yW1iNNPg=="],
+
+    "primereact": ["primereact@10.9.4", "", { "dependencies": { "@types/react-transition-group": "^4.4.1", "react-transition-group": "^4.4.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-GMrelh07Wd1cwKjHpay3LCpwP346D43qBVkt8H/anGYC3z7kv5/AP0pizZv+aGQs2Fg5ufTTf+SI7IKWmyzgGg=="],
+
+    "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
+
    "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],

    "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],

    "react": ["react@19.1.0", "", {}, "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg=="],

+    "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
+
+    "react-hook-form": ["react-hook-form@7.56.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-qWAVokhSpshhcEuQDSANHx3jiAEFzu2HAaaQIzi/r9FNPm1ioAvuJSD4EuZzWd7Al7nTRKcKPnBKO7sRn+zavQ=="],
+
    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],

+    "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
+
+    "regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
+
    "require-relative": ["require-relative@0.8.7", "", {}, "sha512-AKGr4qvHiryxRb19m3PsLRGuKVAbJLUD7E6eOaHkfKhwc+vSgVOCY5xNvm9EkolBKTOf0GrQAZKLimOCz81Khg=="],

    "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
@@ -646,6 +681,8 @@

    "sass-embedded-win32-x64": ["sass-embedded-win32-x64@1.86.0", "", { "os": "win32", "cpu": "x64" }, "sha512-GVX0CHtukr3kjqfqretSlPiJzV7V4JxUjpRZV+yC9gUMTiDErilJh2Chw1r0+MYiYvumCDUSDlticmvJs7v0tA=="],

+    "scheduler": ["scheduler@0.26.0", "", {}, "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="],
+
    "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],

    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
@@ -702,6 +739,8 @@

    "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],

+    "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
+
    "varint": ["varint@6.0.0", "", {}, "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg=="],

    "vite": ["vite@6.2.3", "", { "dependencies": { "esbuild": "^0.25.0", "postcss": "^8.5.3", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg=="],
@@ -746,6 +785,8 @@

    "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],

+    "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
    "rollup/@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],

    "vue-eslint-parser/eslint-scope": ["eslint-scope@7.2.2", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg=="],
--- a/package.json
+++ b/package.json
@@ -13,13 +13,18 @@
    "@preact/signals": "^2.0.2",
    "@tailwindcss/postcss": "^4.0.17",
    "@tailwindcss/vite": "^4.0.17",
+    "@types/uuid": "^10.0.0",
    "clsx": "^2.1.1",
    "postcss": "^8.5.3",
    "preact": "^10.26.2",
    "preact-iso": "^2.9.1",
+    "primelocale": "^2.1.2",
+    "primereact": "^10.9.4",
+    "react-hook-form": "^7.56.1",
    "tailwind-merge": "^3.0.2",
    "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.0.17"
+    "tailwindcss": "^4.0.17",
+    "uuid": "^11.1.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.23.0",
--- a/repomix-output.xml
+++ b/repomix-output.xml
@@ -0,0 +1,678 @@
+This file is a merged representation of a subset of the codebase, containing files not matching ignore patterns, combined into a single document by Repomix.
+
+<file_summary>
+This section contains a summary of this file.
+
+<purpose>
+This file contains a packed representation of the entire repository's contents.
+It is designed to be easily consumable by AI systems for analysis, code review,
+or other automated processes.
+</purpose>
+
+<file_format>
+The content is organized as follows:
+1. This summary section
+2. Repository information
+3. Directory structure
+4. Repository files, each consisting of:
+  - File path as an attribute
+  - Full contents of the file
+</file_format>
+
+<usage_guidelines>
+- This file should be treated as read-only. Any changes should be made to the
+  original repository files, not this packed version.
+- When processing this file, use the file path to distinguish
+  between different files in the repository.
+- Be aware that this file may contain sensitive information. Handle it with
+  the same level of security as you would the original repository.
+</usage_guidelines>
+
+<notes>
+- Some files may have been excluded based on .gitignore rules and Repomix's configuration
+- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
+- Files matching these patterns are excluded: bun.lock, node_modules/, .vscode/
+- Files matching patterns in .gitignore are excluded
+- Files matching default ignore patterns are excluded
+- Files are sorted by Git change count (files with more changes are at the bottom)
+</notes>
+
+<additional_info>
+
+</additional_info>
+
+</file_summary>
+
+<directory_structure>
+public/
+  vite.svg
+src/
+  assets/
+    preact.svg
+  components/
+    ui/
+      Button.module.scss
+      Button.tsx
+      Input.module.scss
+      Input.tsx
+    layout.tsx
+    menu.module.scss
+    menu.tsx
+  pages/
+    login.module.scss
+    login.tsx
+    profile.module.scss
+    profile.tsx
+  providers/
+    AuthProvider.tsx
+  utils/
+    class-merge.ts
+  app.module.scss
+  app.tsx
+  index.scss
+  main.tsx
+  vite-env.d.ts
+.gitattributes
+.gitignore
+.prettierrc
+eslint.config.mjs
+index.html
+package.json
+postcss.config.mts
+tsconfig.app.json
+tsconfig.json
+tsconfig.node.json
+vite.config.ts
+</directory_structure>
+
+<files>
+This section contains the contents of the repository's files.
+
+<file path="src/providers/AuthProvider.tsx">
+import { signal, Signal } from "@preact/signals";
+import { createContext, JSX } from "preact";
+import { useContext } from "preact/hooks";
+
+interface AppContextValue {
+  isLoggedIn: Signal<boolean>;
+}
+
+const AppContext = createContext<AppContextValue>({
+  isLoggedIn: signal(false),
+});
+
+const AppProvider = ({ children }: { children: JSX.Element }) => {
+  const value: AppContextValue = {
+    isLoggedIn: signal(false),
+  };
+
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+};
+
+const useAppContext = () => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error("useAppContext must be used within AppProvider");
+  }
+  return context;
+};
+
+export { AppProvider, useAppContext };
+</file>
+
+<file path="public/vite.svg">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
+</file>
+
+<file path="src/assets/preact.svg">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
+</file>
+
+<file path="src/components/layout.tsx">
+import { useAppContext } from "@/providers/AuthProvider";
+import { FunctionComponent } from "preact";
+import { Route, Router, useLocation } from "preact-iso";
+import { useEffect } from "preact/hooks";
+import Menu from "./menu";
+
+const Layout: FunctionComponent = () => {
+  const { isLoggedIn } = useAppContext();
+  const location = useLocation();
+  useEffect(() => {
+    console.log(isLoggedIn.value);
+  }, [isLoggedIn]);
+  return (
+    <div class="flex min-w-screen flex-row justify-between">
+      <div class="w-full overflow-x-auto">
+        <Router>
+          <Route
+            path="/"
+            component={() => {
+              // location.route("/settings");
+              return <h1>Home</h1>;
+            }}
+          />
+          <Route path="/settings" component={() => <h1>Test</h1>} />
+          <Route path="/tasks" component={() => <h1>Test2</h1>} />
+          <Route default component={() => <h1>404</h1>} />
+        </Router>
+      </div>
+      <Menu />
+    </div>
+  );
+};
+
+export default Layout;
+</file>
+
+<file path="src/pages/profile.module.scss">
+@reference "../index.scss";
+</file>
+
+<file path="src/pages/profile.tsx">
+import Layout from "@/components/layout";
+import { FunctionComponent } from "preact";
+
+const ProfilePage: FunctionComponent = () => {
+  return <Layout />;
+};
+
+export default ProfilePage;
+</file>
+
+<file path="src/utils/class-merge.ts">
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(...inputs));
+}
+</file>
+
+<file path="src/app.module.scss">
+@reference "./index.scss";
+
+.text {
+  @apply text-9xl text-red-500;
+}
+</file>
+
+<file path="src/main.tsx">
+import { render } from "preact";
+import { App } from "./app.tsx";
+import "./index.scss";
+
+render(<App />, document.getElementById("app")!);
+</file>
+
+<file path="src/vite-env.d.ts">
+/// <reference types="vite/client" />
+</file>
+
+<file path=".gitattributes">
+* text=auto
+bun.lock binary
+</file>
+
+<file path=".gitignore">
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+</file>
+
+<file path="eslint.config.mjs">
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config({
+  extends: [eslint.configs.recommended, tseslint.configs.recommended],
+  ignores: ["*.d.ts"],
+  languageOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parserOptions: { ecmaFeatures: { jsx: true } },
+  },
+  settings: {
+    env: {
+      browser: true,
+      es6: true,
+    },
+  },
+});
+</file>
+
+<file path="postcss.config.mts">
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+</file>
+
+<file path="tsconfig.app.json">
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "paths": {
+      "react": [
+        "./node_modules/preact/compat/"
+      ],
+      "react-dom": [
+        "./node_modules/preact/compat/"
+      ],
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src"
+  ]
+}
+</file>
+
+<file path="tsconfig.json">
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
+</file>
+
+<file path="tsconfig.node.json">
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
+</file>
+
+<file path="vite.config.ts">
+import preact from '@preact/preset-vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+import tsConfigPaths from 'vite-tsconfig-paths';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [preact(), tailwindcss(), tsConfigPaths()],
+});
+</file>
+
+<file path="src/components/ui/Button.module.scss">
+@reference '../../index.scss';
+
+.button {
+  @apply rounded-2xl border-2 py-3 font-semibold text-white transition-colors hover:cursor-pointer;
+}
+</file>
+
+<file path="src/components/ui/Button.tsx">
+import { FunctionComponent } from "preact";
+import { tv } from "tailwind-variants";
+import classes from "./Button.module.scss";
+const button = tv({
+  base: classes.button,
+  variants: {
+    color: {
+      primary: "bg-blue-400 hover:bg-blue-500",
+      secondary: "bg-red-400 hover:bg-red-500",
+    },
+  },
+});
+
+const Button: FunctionComponent<{ onClick: () => void }> = (props) => {
+  return (
+    <button type="button" class={button({ color: "primary" })} onClick={props.onClick}>
+      {props.children}
+    </button>
+  );
+};
+
+export default Button;
+</file>
+
+<file path="src/components/ui/Input.tsx">
+import { FunctionComponent } from "preact";
+import { tv } from "tailwind-variants";
+import classes from "./Input.module.scss";
+
+const input = tv({
+  base: classes.input_field,
+  variants: {
+    "text-align": {
+      center: "text-center",
+      left: "text-left",
+    },
+  },
+  defaultVariants: {
+    "text-align": "left",
+  },
+});
+
+interface InputProps {
+  isPassword?: boolean;
+  placeholder?: string;
+  textAlign?: "center" | "left";
+}
+
+const Input: FunctionComponent<InputProps> = ({ isPassword = false, placeholder = "", textAlign }: InputProps) => {
+  return (
+    <input
+      type={isPassword ? "password" : "text"}
+      class={input({ "text-align": textAlign })}
+      placeholder={placeholder}
+    />
+  );
+};
+
+export default Input;
+</file>
+
+<file path="src/components/menu.module.scss">
+@reference "../index.scss";
+
+.menu_container {
+  @apply flex min-h-8 min-w-screen flex-col items-center gap-4 border-l border-l-gray-500 px-5 pt-5 md:min-h-screen md:min-w-[300px];
+}
+
+.menu_item {
+  @apply w-full cursor-pointer rounded-md px-6 py-2 text-center hover:bg-gray-200;
+}
+</file>
+
+<file path="src/components/menu.tsx">
+import { FunctionComponent } from "preact";
+import { useLocation } from "preact-iso";
+import { tv } from "tailwind-variants";
+import classes from "./menu.module.scss";
+
+interface MenuItemProps {
+  title: string;
+  link: string;
+}
+
+const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemProps) => {
+  const location = useLocation();
+  const active = location.path === link;
+  const menuItemClasses = tv({
+    base: classes.menu_item,
+    variants: {
+      activity: {
+        active: "bg-gray-200",
+        inactive: "bg-gray-100",
+      },
+    },
+    defaultVariants: {
+      activity: "inactive",
+    },
+  });
+  return (
+    <div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => location.route(link)}>
+      {title}
+    </div>
+  );
+};
+
+interface MenuItems {
+  title: string;
+  link: string;
+}
+
+const Menu: FunctionComponent = () => {
+  const menu_items: MenuItems[] = [
+    {
+      title: "Профиль",
+      link: "/profile",
+    },
+    {
+      title: "Задачи",
+      link: "/tasks",
+    },
+    {
+      title: "Календарь",
+      link: "/calendar",
+    },
+  ];
+  return (
+    <div class={classes.menu_container}>
+      {menu_items.map(({ title, link }) => (
+        <MenuItem title={title} link={link} />
+      ))}
+    </div>
+  );
+};
+
+export default Menu;
+</file>
+
+<file path="src/pages/login.module.scss">
+@reference "../index.scss";
+
+.login_container {
+  @apply flex min-h-screen flex-col items-center justify-center;
+}
+
+.login_card {
+  @apply flex w-[95%] min-w-[300px] flex-col justify-center gap-2 rounded-md border-gray-400 p-5 shadow-md md:w-[350px];
+}
+</file>
+
+<file path="src/pages/login.tsx">
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import { useAppContext } from "@/providers/AuthProvider";
+import { FunctionComponent } from "preact";
+import { useLocation } from "preact-iso";
+import classes from "./login.module.scss";
+const LoginPage: FunctionComponent = () => {
+  const { isLoggedIn } = useAppContext();
+  const location = useLocation();
+  return (
+    <div class={classes.login_container}>
+      <div class={classes.login_card}>
+        <Input placeholder="Login" textAlign="center" />
+        <Input isPassword placeholder="Password" textAlign="center" />
+        <Button
+          onClick={() => {
+            isLoggedIn.value = true;
+            location.route("/profile/settings");
+          }}
+        >
+          Login
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
+</file>
+
+<file path="src/index.scss">
+@import "tailwindcss";
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+:root {
+  font-family: "Montserrat", sans-serif;
+}
+</file>
+
+<file path="index.html">
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Антихвост</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+</file>
+
+<file path="src/components/ui/Input.module.scss">
+@reference "../../index.scss";
+
+.input_field {
+  @apply rounded-md border border-gray-300 p-2 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
+}
+</file>
+
+<file path="src/app.tsx">
+import { FunctionComponent } from "preact";
+import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
+import "preact/debug";
+import LoginPage from "./pages/login";
+import { AppProvider } from "./providers/AuthProvider";
+
+const HomePage: FunctionComponent = () => {
+  const location = useLocation();
+  location.route("/login");
+  return <div>Redirecting to login...</div>;
+};
+
+export function App() {
+  return (
+    <AppProvider>
+      <LocationProvider>
+        <ErrorBoundary>
+          <Router>
+            <Route path="/" component={HomePage} />
+            <Route path="/login" component={LoginPage} />
+            <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
+          </Router>
+        </ErrorBoundary>
+      </LocationProvider>
+    </AppProvider>
+  );
+}
+</file>
+
+<file path=".prettierrc">
+{
+  "tabWidth": 2,
+  "printWidth": 120,
+  "arrowParens": "always",
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "semi": true,
+  "bracketSpacing": true,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["tv"]
+}
+</file>
+
+<file path="package.json">
+{
+  "name": "anti-hvost",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@preact/signals": "^2.0.2",
+    "@tailwindcss/postcss": "^4.0.17",
+    "@tailwindcss/vite": "^4.0.17",
+    "clsx": "^2.1.1",
+    "postcss": "^8.5.3",
+    "preact": "^10.26.2",
+    "preact-iso": "^2.9.1",
+    "tailwind-merge": "^3.0.2",
+    "tailwind-variants": "^1.0.0",
+    "tailwindcss": "^4.0.17"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.23.0",
+    "@preact/preset-vite": "^2.10.1",
+    "@typescript-eslint/parser": "^8.28.0",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "prettier": "^3.5.3",
+    "prettier-eslint": "^16.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "sass-embedded": "^1.86.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.28.0",
+    "vite": "^6.2.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
+</file>
+
+</files>
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,6 +1,8 @@
 import { FunctionComponent } from "preact";
 import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
-import "preact/debug";
+import { ru } from "primelocale/js/ru.js";
+import { addLocale, locale, PrimeReactProvider } from "primereact/api";
+import { useMountEffect } from "primereact/hooks";
 import Page404 from "./pages/404";
 import LoginPage from "./pages/login";
 import { AppProvider, useAppContext } from "./providers/AuthProvider";
@@ -14,18 +16,28 @@ const HomePage: FunctionComponent = () => {
 };

 export function App() {
+  useMountEffect(() => {
+    addLocale("ru", ru);
+    locale("ru");
+  });
  return (
    <AppProvider>
-      <LocationProvider>
-        <ErrorBoundary>
-          <Router>
-            <Route path="/" component={HomePage} />
-            <Route path="/login" component={LoginPage} />
-            <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
-            <Route default component={() => <Page404 />} />
-          </Router>
-        </ErrorBoundary>
-      </LocationProvider>
+      <PrimeReactProvider
+        value={{
+          unstyled: true,
+        }}
+      >
+        <LocationProvider>
+          <ErrorBoundary>
+            <Router>
+              <Route path="/" component={HomePage} />
+              <Route path="/login" component={LoginPage} />
+              <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
+              <Route default component={() => <Page404 />} />
+            </Router>
+          </ErrorBoundary>
+        </LocationProvider>
+      </PrimeReactProvider>
    </AppProvider>
  );
 }
--- a/src/components/ModalCalendar.tsx
+++ b/src/components/ModalCalendar.tsx
@@ -0,0 +1,204 @@
+import { cn } from "@/utils/class-merge";
+import { ClockIcon } from "@heroicons/react/24/outline";
+import { FunctionComponent } from "preact";
+import { Dispatch, StateUpdater, useState } from "preact/hooks";
+import { Calendar, CalendarPassThroughMethodOptions } from "primereact/calendar";
+import { FormEvent } from "primereact/ts-helpers";
+import Button from "./ui/Button";
+import ModalWindow from "./ui/Modal";
+
+interface ModalCalendarProps {
+  isOpen?: boolean;
+  setIsOpen?: Dispatch<StateUpdater<boolean>>;
+  onClose?: () => void;
+  value?: Date;
+  onChange?: (e: FormEvent<Date>) => void;
+}
+
+const TRANSITIONS = {
+  overlay: {
+    timeout: 150,
+    cn: {
+      enter: "opacity-0 scale-75",
+      enterActive: "opacity-100 !scale-100 transition-[transform,opacity] duration-150 ease-in",
+      exit: "opacity-100",
+      exitActive: "!opacity-0 transition-opacity duration-150 ease-linear",
+    },
+  },
+};
+
+const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpen, onClose, onChange, value }) => {
+  const [showTime, setShowTime] = useState(false);
+  return (
+    <ModalWindow
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      onClose={() => {
+        onClose!();
+        setShowTime(false);
+      }}
+      className="md:h-[40rem] md:w-[30rem]"
+      zIndex={60}
+    >
+      <div class="w-full flex-1 self-start">
+        <Calendar
+          inline
+          onChange={onChange}
+          value={value}
+          hourFormat="24"
+          showTime={showTime}
+          pt={{
+            root: ({ props }: CalendarPassThroughMethodOptions) => ({
+              className: cn("inline-flex w-full relative", {
+                "opacity-60 select-none pointer-events-none cursor-default": props.disabled,
+              }),
+            }),
+            input: ({ props }: CalendarPassThroughMethodOptions) => ({
+              root: {
+                className: cn(
+                  "font-sans text-base text-gray-600 bg-white p-3 border border-gray-300  transition-colors duration-200 appearance-none",
+                  "hover:border-blue-500",
+                  {
+                    "rounded-lg": !props.showIcon,
+                    "border-r-0 rounded-l-lg": props.showIcon,
+                  }
+                ),
+              },
+            }),
+            dropdownButton: {
+              root: ({ props }: CalendarPassThroughMethodOptions) => ({
+                className: cn({ "rounded-l-none": props.icon }),
+              }),
+            },
+            panel: ({ props }: CalendarPassThroughMethodOptions) => ({
+              className: cn("bg-[rgba(251,194,199,0.38)]", "min-w-full", {
+                "shadow-md border-0 absolute": !props.inline,
+                "inline-block overflow-x-auto border border-gray-300  p-2 rounded-lg": props.inline,
+              }),
+            }),
+            header: {
+              className: cn(
+                "flex items-center justify-between",
+                "p-2 text-gray-700  bg-[rgba(251,194,199,0.38)]  font-semibold m-0 border-b border-gray-300  rounded-t-lg"
+              ),
+            },
+            previousButton: {
+              className: cn(
+                "flex items-center justify-center cursor-pointer overflow-hidden relative",
+                "w-8 h-8 text-gray-600  border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
+                "hover:text-gray-700  hover:border-transparent hover:bg-gray-200  "
+              ),
+            },
+            title: { className: "leading-8 mx-auto" },
+            monthTitle: {
+              className: cn("text-gray-700  transition duration-200 font-semibold p-2", "mr-2", "hover:text-blue-500"),
+            },
+            yearTitle: {
+              className: cn("text-gray-700  transition duration-200 font-semibold p-2", "hover:text-blue-500"),
+            },
+            nextButton: {
+              className: cn(
+                "flex items-center justify-center cursor-pointer overflow-hidden relative",
+                "w-8 h-8 text-gray-600  border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
+                "hover:text-gray-700  hover:border-transparent hover:bg-gray-200  "
+              ),
+            },
+            table: {
+              className: cn("border-collapse w-full", "my-2"),
+            },
+            tableHeaderCell: { className: "p-2" },
+            weekDay: { className: "text-gray-600 " },
+            day: { className: "p-2" },
+            dayLabel: ({ context }: CalendarPassThroughMethodOptions) => ({
+              className: cn(
+                "w-6 h-6 rounded-full transition-shadow duration-200 border-transparent border",
+                "flex items-center justify-center mx-auto overflow-hidden relative",
+                "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
+                {
+                  "opacity-60 cursor-default": context.disabled,
+                  "cursor-pointer": !context.disabled,
+                },
+                {
+                  "text-gray-600  bg-transparent hover:bg-gray-200 ": !context.selected && !context.disabled,
+                  "text-blue-700 bg-blue-100 hover:bg-blue-200": context.selected && !context.disabled,
+                }
+              ),
+            }),
+            monthPicker: { className: "my-2" },
+            month: ({ context }: CalendarPassThroughMethodOptions) => ({
+              className: cn(
+                "w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative",
+                "p-2 transition-shadow duration-200 rounded-lg",
+                "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
+                {
+                  "text-gray-600  bg-transparent hover:bg-gray-200 ": !context.selected && !context.disabled,
+                  "text-blue-700 bg-blue-100 hover:bg-blue-200": context.selected && !context.disabled,
+                }
+              ),
+            }),
+            yearPicker: {
+              className: cn("my-2"),
+            },
+            year: ({ context }: CalendarPassThroughMethodOptions) => ({
+              className: cn(
+                "w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative",
+                "p-2 transition-shadow duration-200 rounded-lg",
+                "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
+                {
+                  "text-gray-600  bg-transparent hover:bg-gray-200 ": !context.selected && !context.disabled,
+                  "text-blue-700 bg-blue-100 hover:bg-blue-200": context.selected && !context.disabled,
+                }
+              ),
+            }),
+            timePicker: {
+              className: cn("flex justify-center items-center", "border-t-1 border-solid border-gray-300"),
+            },
+            separatorContainer: { className: "flex items-center flex-col px-2" },
+            separator: { className: "text-xl" },
+            hourPicker: { className: "flex items-center flex-col px-2" },
+            minutePicker: { className: "flex items-center flex-col px-2" },
+            ampmPicker: { className: "flex items-center flex-col px-2" },
+            incrementButton: {
+              className: cn(
+                "flex items-center justify-center cursor-pointer overflow-hidden relative",
+                "w-8 h-8 text-gray-600  border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
+                "hover:text-gray-700  hover:border-transparent hover:bg-gray-200  "
+              ),
+            },
+            decrementButton: {
+              className: cn(
+                "flex items-center justify-center cursor-pointer overflow-hidden relative",
+                "w-8 h-8 text-gray-600  border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
+                "hover:text-gray-700  hover:border-transparent hover:bg-gray-200  "
+              ),
+            },
+            groupContainer: { className: "flex" },
+            group: {
+              className: cn(
+                "flex-1",
+                "border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0",
+                "first:pl-0 first:border-l-0"
+              ),
+            },
+            transition: TRANSITIONS.overlay,
+          }}
+        />
+        <p class={cn("mt-2 text-center text-xl font-semibold", { hidden: !value })}>
+          {value && Intl.DateTimeFormat("ru-RU", { day: "2-digit", month: "2-digit", year: "numeric" }).format(value)}
+        </p>
+      </div>
+      <Button
+        className="flex w-full flex-row items-center justify-center gap-2 self-end"
+        onClick={() => {
+          setShowTime(!showTime);
+        }}
+      >
+        <ClockIcon class="h-8" /> <p>Время</p>
+      </Button>
+    </ModalWindow>
+  );
+};
+
+ModalCalendar.displayName = "AHModalCalendar";
+
+export default ModalCalendar;
--- a/src/components/ModalTags.tsx
+++ b/src/components/ModalTags.tsx
@@ -0,0 +1,125 @@
+import { cn } from "@/utils/class-merge";
+import { BookOpenIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { FunctionComponent } from "preact";
+import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
+import Button from "./ui/Button";
+import ModalWindow from "./ui/Modal";
+
+export interface ITags {
+  first: string;
+  second: string;
+}
+
+interface ModalTagsProps {
+  isOpen?: boolean;
+  setIsOpen?: Dispatch<StateUpdater<boolean>>;
+  onClose?: () => void;
+  value?: ITags;
+  onChange?: Dispatch<StateUpdater<ITags>>;
+  tagsList?: {
+    first: string[];
+    second: string[];
+  };
+}
+
+const ModalTags: FunctionComponent<ModalTagsProps> = ({ isOpen, setIsOpen, onClose, onChange, value, tagsList }) => {
+  const [showFirstTags, setShowFirstTags] = useState(false);
+  const [showSecondTags, setShowSecondTags] = useState(false);
+  useEffect(() => {
+    if (showFirstTags && showSecondTags) setShowFirstTags(false);
+  }, [showSecondTags]);
+  useEffect(() => {
+    if (showFirstTags && showSecondTags) setShowSecondTags(false);
+  }, [showFirstTags]);
+  return (
+    <ModalWindow
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      onClose={() => {
+        onClose!();
+        setShowFirstTags(false);
+        setShowSecondTags(false);
+      }}
+      className="relative h-[14rem] justify-between py-4 md:h-[14rem] md:w-[25rem]"
+      zIndex={70}
+    >
+      <p class="text-2xl font-semibold">Теги</p>
+      <div class="flex w-[85%] flex-col gap-2 md:w-full">
+        <Button
+          className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]!"
+          onClick={() => setShowFirstTags(!showFirstTags)}
+        >
+          <BookOpenIcon class="size-6" />
+          {value?.first || "Предмет"}
+        </Button>
+        <Button
+          className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]! break-words"
+          onClick={() => setShowSecondTags(!showSecondTags)}
+        >
+          <DocumentDuplicateIcon class="size-6" />
+          {value?.second || "Тема"}
+        </Button>
+        {showFirstTags && (
+          <div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center rounded-[4rem] bg-white px-8 py-4 text-xs md:top-0 md:left-full md:mt-0 md:ml-5">
+            <div class="flex h-fit max-h-[45vh] w-full flex-col gap-3 overflow-y-auto">
+              {tagsList?.first.map((tag) => (
+                <div
+                  class="flex cursor-pointer flex-row gap-2"
+                  onClick={() =>
+                    onChange?.((prev) => {
+                      return { ...prev, first: tag };
+                    })
+                  }
+                >
+                  <div
+                    class={cn(
+                      "pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
+                      {
+                        "bg-black": value?.first === tag,
+                      }
+                    )}
+                  >
+                    ✓
+                  </div>
+                  <p>{tag}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {showSecondTags && (
+          <div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center rounded-[4rem] bg-white px-8 py-4 text-xs md:top-0 md:left-full md:mt-0 md:ml-5">
+            <div class="flex h-fit max-h-[45vh] w-full flex-col gap-3 overflow-y-auto">
+              {tagsList?.second.map((tag) => (
+                <div
+                  class="flex cursor-pointer flex-row gap-2"
+                  onClick={() =>
+                    onChange?.((prev) => {
+                      return { ...prev, second: tag };
+                    })
+                  }
+                >
+                  <div
+                    class={cn(
+                      "pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
+                      {
+                        "bg-black": value?.second === tag,
+                      }
+                    )}
+                  >
+                    ✓
+                  </div>
+                  <p>{tag}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </ModalWindow>
+  );
+};
+
+ModalTags.displayName = "AHModalTags";
+
+export default ModalTags;
--- a/src/components/calendar.module.scss
+++ b/src/components/calendar.module.scss
--- a/src/components/calendar.tsx
+++ b/src/components/calendar.tsx
@@ -1,9 +1,26 @@
-import { withTitle } from "@/constructors/Component";
-import { UrlsTitle } from "@/enums/urls";
 import { cn } from "@/utils/class-merge";
+import { BackwardIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent, h } from "preact";
 import { useState } from "preact/hooks";

+interface BackButtonProps {
+  selectedDate: Date;
+  onClick: () => void;
+}
+
+const BackButton: FunctionComponent<BackButtonProps> = ({ selectedDate, onClick }: BackButtonProps) => {
+  const currentDate = new Date();
+
+  return currentDate.getMonth() !== selectedDate.getMonth() ? (
+    <div
+      class="fixed bottom-4 left-8 hidden aspect-square h-24 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgb(251,194,199,0.7)] md:flex"
+      onClick={onClick}
+    >
+      <BackwardIcon class="size-8 text-sm text-white" />
+    </div>
+  ) : null;
+};
+
 type MarkedDateType = "event" | "holiday" | "important" | string;
 type MarkedDates = Record<string, MarkedDateType>;

@@ -44,7 +61,7 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({

  const getFirstDayOfMonth = (year: number, month: number): number => {
    const day = new Date(year, month, 1).getDay();
-    return day === 0 ? 6 : day - 1;
+    return day === 0 ? 6 : day;
  };

  const handlePrevMonth = (): void => {
@@ -60,7 +77,7 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
      setCurrentDate(new Date(date.getFullYear(), date.getMonth(), 1));
    }
    setSelectedDate(date);
-    onDateSelect?.(date);
+    onDateSelect(date);
  };

  const isDateMarked = (date: Date): MarkedDateType | undefined => {
@@ -70,7 +87,7 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({

  const getLastDayOfMonth = (year: number, month: number): number => {
    const day = new Date(year, month + 1, 0).getDay();
-    return day === 0 ? 6 : day - 1;
+    return day === 0 ? 6 : day;
  };

  const renderDays = (): h.JSX.Element[] => {
@@ -84,12 +101,11 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
    const days: h.JSX.Element[] = [];

    // Дни предыдущего месяца
-    //TODO: work on click on 31 march
    const prevMonthDays = getDaysInMonth(year, month - 1);
    const daysFromPrevMonth = firstDayOfMonth === 0 ? 6 : firstDayOfMonth;
    for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
      const day = prevMonthDays - i;
-      const date = new Date(year, month - 1, day + 1);
+      const date = new Date(year, month - 1, day);
      const dateStr = date.toISOString().split("T")[0];
      const isSelected = selectedDate?.toISOString().split("T")[0] === dateStr;
      const markType = isDateMarked(date);
@@ -122,7 +138,7 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({

    // Дни текущего месяца
    for (let day = 1; day <= daysInMonth; day++) {
-      const date = new Date(year, month, day + 1);
+      const date = new Date(year, month, day);
      const dateStr = date.toISOString().split("T")[0];
      const isSelected = selectedDate?.toISOString().split("T")[0] === dateStr;
      const markType = isDateMarked(date);
@@ -166,9 +182,9 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
    }

    // Дни следующего месяца
-    const daysToAdd = 6 - (lastDayOfMonth === 6 ? 4 : lastDayOfMonth);
+    const daysToAdd = 6 - (lastDayOfMonth === 6 ? 3 : lastDayOfMonth);
    for (let day = 1; day <= daysToAdd; day++) {
-      const date = new Date(year, month + 1, day + 1);
+      const date = new Date(year, month + 1, day);
      const dateStr = date.toISOString().split("T")[0];
      const isSelected = selectedDate?.toISOString().split("T")[0] === dateStr;
      const markType = isDateMarked(date);
@@ -203,7 +219,10 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
  };

  return (
-    <div className={`flex flex-col ${className}`}>
+    <div className={`flex w-full flex-col ${className}`}>
+      <div class="fixed top-0 right-[20rem] z-100 flex h-full w-full flex-col items-center justify-center bg-white">
+        Закрыто
+      </div>
      <div className="mb-4 flex items-center justify-between px-2">
        <button
          onClick={handlePrevMonth}
@@ -235,7 +254,6 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
          </svg>
        </button>
      </div>
-
      <div className="mb-2 grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-500">
        {dayNames.map((day) => (
          <div key={day} className="flex h-10 items-center justify-center">
@@ -243,10 +261,10 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
          </div>
        ))}
      </div>
-
      <div className="grid flex-1 grid-cols-7 gap-1">{renderDays()}</div>
+      <BackButton selectedDate={currentDate} onClick={() => setCurrentDate(new Date())} />
    </div>
  );
 };

-export default withTitle(UrlsTitle.CALENDAR, BigCalendar);
+export default BigCalendar;
--- a/src/components/menu.module.scss
+++ b/src/components/menu.module.scss
@@ -1,13 +1,13 @@
@reference "../index.scss";

 #container {
-  @apply flex min-h-auto w-screen flex-col items-center gap-4 px-2 py-3 md:min-h-screen md:w-[30rem];
+  @apply flex min-h-auto w-screen flex-col items-center gap-4 px-2 py-3 md:min-h-screen md:w-[20rem];
 }

 .menu_container {
-  @apply fixed right-0 bottom-0 left-0 flex h-[4rem] w-full flex-1 flex-row items-center gap-1 rounded-[44px] bg-[rgba(167,213,246,0.3)] px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:flex-col md:gap-4 md:border-t-0 md:px-5 md:py-5;
+  @apply fixed right-0 bottom-0 left-0 flex h-[4rem] w-full flex-1 flex-row items-center gap-1 rounded-[3rem] bg-[rgba(167,213,246,0.3)] px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:flex-col md:gap-4 md:border-t-0 md:px-5 md:py-5;
 }

 .menu_item {
-  @apply flex w-full cursor-pointer flex-row items-center gap-3 rounded-full px-3 py-2 text-center hover:bg-gray-200 md:px-6;
+  @apply flex w-full flex-1/3 cursor-pointer flex-row items-center justify-center gap-3 rounded-full px-3 py-2 text-center hover:bg-gray-200 md:flex-initial md:justify-start md:px-6;
 }
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -4,6 +4,8 @@ import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
+import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
+import { useEffect, useState } from "preact/hooks";

 interface MenuItemProps {
  title: string;
@@ -29,30 +31,54 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuI
  return (
    <div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => route(link, true)}>
      {icon}
-      {title}
+      <div class="hidden md:block">{title}</div>
    </div>
  );
 };

+
 const Avatar: FunctionComponent = () => {
+  const [status, setStatus] = useState("");
  const { route, path } = useLocation();
-  //TODO: Move styles to scss module
+
+  useEffect(() => {
+    const updateStatus = () => {
+      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+      const points = calculatePoints(completedTasks);
+      setStatus(getCurrentStatus(points));
+    };
+
+    // Initial update
+    updateStatus();
+
+    // Update when tasks change
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === "tasks") {
+        updateStatus();
+      }
+    };
+    
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
  return (
    <button
      onClick={() => route("/profile/settings")}
-      class={cn("hidden h-32 w-full cursor-pointer overflow-hidden transition-[height] md:block", {
-        "h-0": path === "/profile/settings",
+      class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", {
+        "h-0 opacity-0": path === "/profile/settings",
      })}
    >
      <div
        class={cn(
-          "h-full flex-row items-center justify-around rounded-[44px] 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"
+          "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="flex flex-col items-center justify-center">
-          <p class="text-3xl font-semibold">Никнейм</p>
-          <p class="text-xl font-light">Статус</p>
+          <p class="text-3xl font-semibold">никнейм</p>
+          <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
        </div>
      </div>
    </button>
--- a/src/components/task.module.scss
+++ b/src/components/task.module.scss
@@ -1,5 +1,5 @@
@reference "../index.scss";

 .task {
-  @apply flex h-24 w-[300px] cursor-pointer flex-row items-center justify-start gap-4 rounded-[39px] 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 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];
 }
--- a/src/components/task.tsx
+++ b/src/components/task.tsx
@@ -1,20 +1,54 @@
 import { FunctionComponent } from "preact";
+import { MouseEventHandler } from "preact/compat";
+import { tv } from "tailwind-variants";
 import classes from "./task.module.scss";

 interface TaskProps {
  name: string;
+  checked?: boolean;
+  onClick?: () => void;
+  onMarkClick?: MouseEventHandler<HTMLParagraphElement>;
 }

-const Task: FunctionComponent<TaskProps> = ({ name }: TaskProps) => {
+const taskStyle = tv({
+  base: "hover:scale-[1.1]active:scale-[1.1] flex aspect-square h-full flex-col items-center justify-center rounded-full border transition-[scale] duration-100 ease-in-out select-none",
+  variants: {
+    checked: {
+      true: "bg-black",
+      false: "bg-white",
+    },
+  },
+});
+
+const markStyle = tv({
+  base: "text-4xl font-light text-white",
+  variants: {
+    checked: {
+      true: "block",
+      false: "hidden",
+    },
+  },
+});
+
+const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {}, onMarkClick = () => {} }) => {
  return (
-    // Временное действие для тестирования
-    <button onClick={() => alert(name)}>
-      <div class={classes.task}>
-        <div class="aspect-square h-full rounded-full border bg-white"></div>
+    <div class="w-[95%]">
+      <div class={classes.task} onClick={onClick}>
+        <div
+          class={taskStyle({ checked })}
+          onClick={(e) => {
+            e.stopPropagation();
+            onMarkClick(e);
+          }}
+        >
+          <p class={markStyle({ checked })}>✓</p>
+        </div>
        {name}
      </div>
-    </button>
+    </div>
  );
 };

+Task.displayName = "AHTask";
+
 export default Task;
--- a/src/components/ui/Button.module.scss
+++ b/src/components/ui/Button.module.scss
@@ -1,5 +1,5 @@
@reference '../../index.scss';

 .button {
-  @apply rounded-[23px] px-4 py-3 text-xl text-black shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-colors hover:cursor-pointer;
+  @apply rounded-4xl px-4 py-3 text-xl text-black shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-colors hover:cursor-pointer focus:outline-1;
 }
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -1,27 +1,31 @@
-import { FunctionComponent } from "preact";
+import { forwardRef, HTMLProps } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./Button.module.scss";
 const button = tv({
  base: classes.button,
  variants: {
    color: {
-      primary: "bg-[rgba(206,232,251,0.7)] hover:bg-[rgba(206,232,251,0.9)]",
-      secondary: "bg-[rgba(255,251,197,0.68)] hover:bg-[rgba(255,251,197,0.9)]",
+      primary: "bg-[rgba(206,232,251,0.7)] hover:bg-[rgba(206,232,251,0.9)] active:bg-[rgba(206,232,251,0.9)]",
+      secondary: "bg-[rgba(255,251,197,0.68)] hover:bg-[rgba(255,251,197,0.9)] active:bg-[rgba(255,251,197,0.9)]",
+      red: "bg-[rgba(251,194,199,0.53)] hover:bg-[rgba(251,194,199,0.9)] active:bg-[rgba(251,194,199,0.9)]",
    },
  },
 });

-interface ButtonProps {
-  color?: "primary" | "secondary";
-  onClick?: () => void;
+interface ButtonProps extends HTMLProps<HTMLButtonElement> {
+  color?: "primary" | "secondary" | "red";
+  className?: string;
 }

-const Button: FunctionComponent<ButtonProps> = ({ children, onClick = () => {}, color = "primary" }) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { children, onClick = () => {}, color = "primary", className = "", type = "button" } = props;
  return (
-    <button type="button" class={button({ color: color })} onClick={onClick}>
+    <button ref={ref} type={type} class={button({ color: color, class: className })} onClick={onClick}>
      {children}
    </button>
  );
-};
+});
+
+Button.displayName = "AHButton";

 export default Button;
--- a/src/components/ui/DataPicker.tsx
+++ b/src/components/ui/DataPicker.tsx
@@ -0,0 +1,14 @@
+import { FunctionComponent } from "preact";
+import { Calendar } from "primereact/calendar";
+import { FormEvent } from "primereact/ts-helpers";
+
+interface DatePickerProps {
+  value?: Date;
+  onChange?: (e: FormEvent<Date>) => void;
+}
+
+const DatePicker: FunctionComponent<DatePickerProps> = ({ value = new Date(), onChange }: DatePickerProps) => {
+  return <Calendar value={value} onChange={onChange} />;
+};
+
+export default DatePicker;
--- a/src/components/ui/Dialog.tsx
+++ b/src/components/ui/Dialog.tsx
@@ -0,0 +1,52 @@
+import { FunctionComponent } from "preact";
+import Button from "./Button";
+
+interface DialogProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  title: string;
+  content: string;
+  onConfirm: () => void;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+const Dialog: FunctionComponent<DialogProps> = ({
+  isOpen,
+  setIsOpen,
+  title,
+  content,
+  onConfirm,
+  confirmText = "Подтвердить",
+  cancelText = "Отмена",
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div class="w-full max-w-md rounded-[4rem] bg-white p-6 shadow-lg">
+        <h2 class="mb-4 text-xl font-semibold">{title}</h2>
+        <p class="mb-6">{content}</p>
+        <div class="flex justify-end gap-4">
+          <Button
+            onClick={() => setIsOpen(false)}
+            className="bg-gray-200 text-gray-800 hover:bg-gray-300"
+          >
+            {cancelText}
+          </Button>
+          <Button
+            onClick={() => {
+              onConfirm();
+              setIsOpen(false);
+            }}
+            color="red"
+          >
+            {confirmText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dialog; 
--- a/src/components/ui/Input.module.scss
+++ b/src/components/ui/Input.module.scss
@@ -1,5 +1,5 @@
@reference "../../index.scss";

 .input_field {
-  @apply rounded-[23px] border border-gray-300 bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
+  @apply w-full rounded-[4rem] border bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
 }
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -1,4 +1,5 @@
-import { FunctionComponent } from "preact";
+import { cn } from "@/utils/class-merge";
+import { forwardRef, HTMLProps, useEffect } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./Input.module.scss";

@@ -9,26 +10,40 @@ const input = tv({
      center: "text-center",
      left: "text-left",
    },
+    "border-error": {
+      true: "border-red-500 placeholder:text-red-500",
+      false: "border-gray-300",
+    },
  },
  defaultVariants: {
    "text-align": "left",
  },
 });

-interface InputProps {
-  isPassword?: boolean;
-  placeholder?: string;
+interface InputProps extends HTMLProps<HTMLInputElement> {
  textAlign?: "center" | "left";
+  error?: string;
 }

-const Input: FunctionComponent<InputProps> = ({ isPassword = false, placeholder = "", textAlign }: InputProps) => {
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const { textAlign, error, type = "text", ...rest } = props;
+  useEffect(() => {
+    console.log(`error: ${error}`);
+  }, [error]);
  return (
-    <input
-      type={isPassword ? "password" : "text"}
-      class={input({ "text-align": textAlign })}
-      placeholder={placeholder}
-    />
+    <div class="flex w-full flex-col items-center gap-1">
+      <input class={input({ "text-align": textAlign, "border-error": !!error })} ref={ref} type={type} {...rest} />
+      <p
+        class={cn("invisible h-10 w-[80%] text-center text-[0.7rem] break-words text-red-500", {
+          visible: error !== "",
+        })}
+      >
+        {error}
+      </p>
+    </div>
  );
-};
+});
+
+Input.displayName = "AHInput";

 export default Input;
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -0,0 +1,50 @@
+import { cn } from "@/utils/class-merge";
+import { FunctionComponent } from "preact";
+import { Dispatch, StateUpdater, useEffect } from "preact/hooks";
+
+interface ModalWindowProps {
+  isOpen?: boolean;
+  setIsOpen?: Dispatch<StateUpdater<boolean>>;
+  onClose?: () => void;
+  className?: string;
+  zIndex?: number;
+}
+const ModalWindow: FunctionComponent<ModalWindowProps> = ({
+  isOpen,
+  children,
+  setIsOpen,
+  onClose,
+  className = "",
+  zIndex,
+}) => {
+  useEffect(() => {
+    if (isOpen) return;
+    if (onClose) onClose();
+  }, [isOpen]);
+  return (
+    isOpen && (
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+          if (setIsOpen) setIsOpen(false);
+        }}
+        class={cn(
+          "fixed top-0 left-0 z-50 flex h-screen w-screen cursor-pointer flex-col items-center justify-center bg-black/50"
+        )}
+        style={{ zIndex: zIndex }}
+      >
+        <div
+          class={cn(
+            "flex h-[40rem] w-[95%] cursor-auto flex-col items-center justify-start rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16",
+            className
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
+      </div>
+    )
+  );
+};
+
+export default ModalWindow;
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,6 +1,8 @@
@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 :root {
+  color: black;
+  background-color: white;
  font-family: "Montserrat", sans-serif;
 }

--- a/src/pages/login.dto.ts
+++ b/src/pages/login.dto.ts
@@ -0,0 +1,4 @@
+export interface ILoginForm {
+  login: string;
+  password: string;
+}
--- a/src/pages/login.module.scss
+++ b/src/pages/login.module.scss
@@ -5,9 +5,9 @@
 }

 .login_card {
-  @apply flex min-h-[50vh] w-[95%] min-w-[300px] flex-col justify-around gap-2 rounded-[103px] bg-[linear-gradient(180.00deg,_rgba(239,251,194,0.53),rgb(206,232,251)_100%)] p-7 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:w-[350px];
+  @apply flex h-fit w-[95%] min-w-[300px] flex-col justify-around rounded-[3rem] bg-[linear-gradient(180.00deg,_rgba(239,251,194,0.53),rgb(206,232,251)_100%)] p-7 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:w-[350px];
 }

 .login_card_name {
-  @apply text-center text-2xl font-semibold;
+  @apply mb-8 text-center text-2xl font-semibold;
 }
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -5,28 +5,76 @@ import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 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";
+
+const testUser = {
+  login: "test",
+  password: "test",
+};
 const LoginPage: FunctionComponent = () => {
  const { isLoggedIn } = useAppContext();
  const { route } = useLocation();
-  return (
+  const { control, handleSubmit, formState, setError } = useForm({
+    defaultValues: {
+      login: "",
+      password: "",
+    },
+    mode: "onChange",
+  });
+  const login: SubmitHandler<ILoginForm> = async (data) => {
+    console.log(data);
+    if (data.login !== testUser.login || data.password !== testUser.password) {
+      setError("login", { message: "Неверный логин или пароль" });
+      setError("password", { message: "Неверный логин или пароль" });
+      return;
+    }
+    isLoggedIn.value = true;
+    localStorage.setItem("loggedIn", "true");
+    route("/profile/tasks", true);
+  };
+  if (isLoggedIn.value) route("/profile/tasks", true);
+  return !isLoggedIn.value ? (
    <div class={classes.login_container}>
      <div class={classes.login_card}>
        <p class={classes.login_card_name}>Антихвост</p>
-        <Input placeholder="Логин" textAlign="center" />
-        <Input isPassword placeholder="Пароль" textAlign="center" />
-        <Button
-          color="secondary"
-          onClick={() => {
-            isLoggedIn.value = true;
-            localStorage.setItem("loggedIn", "true");
-            route("/profile/tasks", true);
-          }}
-        >
-          Войти
-        </Button>
+        <form onSubmit={handleSubmit(login)}>
+          <Controller
+            name="login"
+            control={control}
+            rules={{
+              required: "Введите логин",
+            }}
+            render={({ field }) => (
+              <Input placeholder="Логин" textAlign="center" error={formState.errors.login?.message} {...field} />
+            )}
+          />
+          <Controller
+            name="password"
+            control={control}
+            rules={{
+              required: "Введите пароль",
+            }}
+            render={({ field }) => (
+              <Input
+                placeholder="Пароль"
+                textAlign="center"
+                type="password"
+                error={formState.errors.password?.message}
+                {...field}
+              />
+            )}
+          />
+          <Button type="submit" color="secondary" className="w-full">
+            Войти
+          </Button>
+        </form>
      </div>
    </div>
+  ) : (
+    <p>Redirecting...</p>
  );
 };

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

 .container {
-  @apply flex h-full w-full flex-col items-center px-6 pt-3 md:flex-row md:items-start;
+  @apply flex h-full w-full flex-col items-center px-6 pt-8 md:items-start;
 }

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

 .profile_container {
@@ -17,7 +17,7 @@
 }

 .header_block__name {
-  @apply mt-5 flex h-fit w-full flex-col items-center justify-start gap-3;
+  @apply flex h-fit w-full flex-1 flex-col items-center justify-start gap-3 px-10;
 }
 .settings_block {
  @apply mt-12 flex h-full w-full flex-col items-center justify-start md:mt-0 md:justify-center;
--- a/src/pages/profile_settings.tsx
+++ b/src/pages/profile_settings.tsx
@@ -2,22 +2,60 @@ import Button from "@/components/ui/Button";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
+import { cn } from "@/utils/class-merge";
+import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import classes from "./profile_settings.module.scss";

 const ProfileSettings: FunctionComponent = () => {
  const { isLoggedIn } = useAppContext();
  const { route } = useLocation();
+  const [status, setStatus] = useState(0);
+  const maxStatus = 100;
+
+  useEffect(() => {
+    const updateStatus = () => {
+      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+      const points = calculatePoints(completedTasks);
+      setStatus(points);
+    };
+
+    // Initial update
+    updateStatus();
+
+    // Update when tasks change
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === "tasks") {
+        updateStatus();
+      }
+    };
+    
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
  return (
    <div class={classes.container}>
-      <div id={classes.avatar}>Аватар</div>
-      <div class={classes.profile_container}>
+      <div class="flex w-full flex-col items-center rounded-[4rem] bg-[linear-gradient(180.00deg,rgb(251,194,199),rgba(206,232,251,0.72)_100%)] px-7 py-5 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:flex-row">
+        <div id={classes.avatar}>Аватар</div>
        <div class={classes.header_block__name}>
-          <p class="text-5xl font-semibold">Никнейм</p>
-          <p class="text-2xl font-light">Статус</p>
+          <p class="text-4xl font-semibold">Никнейм</p>
+          <p class="text-2xl font-light">{getCurrentStatus(status)}</p>
+          <div class="h-1.5 w-full overflow-hidden rounded-2xl bg-white">
+            <div
+              class={cn("relative top-0 left-0 h-2 bg-black")}
+              style={{ width: `${(status / maxStatus) * 100}%` }}
+            ></div>
+          </div>
+          <div class="-mt-3 self-end text-sm font-light">
+            {status}/{maxStatus}
+          </div>
        </div>
-
+      </div>
+      <div class={classes.profile_container}>
        <div class={classes.settings_block}>
          <div class={classes.settings_block__buttons}>
            <Button>Сменить тему</Button>
--- a/src/pages/profile_tasks.dto.ts
+++ b/src/pages/profile_tasks.dto.ts
@@ -0,0 +1,13 @@
+export interface ITask {
+  id: string;
+  name: string;
+  checked: boolean;
+  date: Date;
+  description: string;
+  tags: string[];
+  new?: boolean;
+}
+
+export interface ITaskForm extends Omit<ITask, "date"> {
+  date: string;
+}
--- a/src/pages/profile_tasks.module.scss
+++ b/src/pages/profile_tasks.module.scss
@@ -1,13 +1,13 @@
@reference "../index.scss";

 .container {
-  @apply flex h-fit w-full flex-col items-center gap-4 px-6 pt-3;
+  @apply flex h-fit min-h-full w-full flex-col items-center gap-4 pt-3 md:px-6;
 }

 .header {
-  @apply mb-12 w-full text-3xl font-semibold md:text-5xl;
+  @apply mb-3 w-full text-3xl font-semibold md:mb-12 md:text-5xl;
 }

 .tasks_container {
-  @apply flex w-full flex-col items-center gap-10 md:items-start;
+  @apply flex w-full flex-col items-center gap-3 md:items-start md:gap-10;
 }
--- a/src/pages/profile_tasks.tsx
+++ b/src/pages/profile_tasks.tsx
@@ -1,26 +1,499 @@
 import Task from "@/components/task";
+
+import ModalCalendar from "@/components/ModalCalendar";
+import ModalTags, { ITags } from "@/components/ModalTags";
+import Button from "@/components/ui/Button";
+import Dialog from "@/components/ui/Dialog";
+import ModalWindow from "@/components/ui/Modal";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
+import { cn } from "@/utils/class-merge";
+import { PlusIcon } from "@heroicons/react/20/solid";
+import {
+  BookmarkIcon,
+  BookOpenIcon,
+  CalendarDaysIcon,
+  DocumentDuplicateIcon,
+  FunnelIcon,
+  InboxArrowDownIcon,
+  MagnifyingGlassIcon,
+  PencilIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { useMemo } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
+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 classes from "./profile_tasks.module.scss";

-const example_tasks = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6", "Test 7", "Test 8"];
+const example_tags: { first: string[]; second: string[] } = {
+  first: ["Программирование", "Информатика", "Физика", "Математика"],
+  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
+};

 const ProfileTasks: FunctionComponent = () => {
+  const [openModal, setIsOpen] = useState(false); // Открыта модалка
+  const [openModalCalendar, setOpenModalCalendar] = useState(false); // Открыта модалка календаря
+  const [openModalTags, setOpenModalTags] = useState(false); // Открыта модалка тегов
+  const [isEdit, setIsEdit] = useState(false); // Открыта задача
+  const [isEditModal, setIsEditModal] = useState(false); // Включено редактирование задачи
+  const [isCreating, setIsCreating] = useState(false); // Включено создание задачи
+  const [editContent, setEditContent] = useState<ITask | null>(null); // Содержимое редактируемой задачи
+  const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
+  const [tags, setTags] = useState<ITags>({ first: "", second: "" });
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const getDate = useMemo(() => {
    const date = new Date();
    const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
    return formatter.format(date);
  }, []);
+  const init_tasks: ITask[] = localStorage.getItem("tasks") ? JSON.parse(localStorage.getItem("tasks") as string) : [];
+  let clear = false;
+  init_tasks.forEach((task) => {
+    clear = clear || (task.new == undefined ? true : false);
+    if (!clear) task.new = true;
+    task.date = new Date(task.date);
+  });
+  const [tasks, setTasks] = useState<ITask[]>(clear ? [] : init_tasks);
+  useEffect(() => {
+    localStorage.setItem("tasks", JSON.stringify(tasks));
+  }, [tasks]);
+
+  const {
+    handleSubmit,
+    register,
+    reset,
+    setError,
+    formState: { errors },
+  } = useForm<ITaskForm>({
+    defaultValues: {
+      tags: [],
+    },
+  });
+  const saveTask: SubmitHandler<ITaskForm> = (data) => {
+    if (!calendarDate) {
+      setError("date", { message: "Выберите дату" });
+      return;
+    }
+    console.log(tags);
+    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
+      setError("tags", { message: "Выберите теги" });
+      return;
+    }
+    const eTask: ITask = {
+      ...data,
+      date: calendarDate,
+      tags: editContent?.tags.length ? editContent.tags : [tags.first, tags.second],
+      new: true,
+    };
+    if (isCreating) setTasks([...tasks, eTask]);
+    else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
+    if (isCreating) setIsOpen(false);
+    setTags({ first: "", second: "" });
+  };
+  useEffect(() => {
+    if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
+    else reset();
+  }, [editContent]);
+  useEffect(() => {
+    reset({
+      name: "",
+      description: "",
+      date: "",
+      tags: [],
+      checked: false,
+    });
+  }, [isCreating]);
+  useEffect(() => {
+    if (!editContent) return;
+    const newEditContent = editContent;
+    if (tags.first) newEditContent.tags = [tags.first, newEditContent.tags[1]];
+    if (tags.second) newEditContent.tags = [newEditContent.tags[0], tags.second];
+    setEditContent(newEditContent);
+  }, [tags]);
+
+  const groupTasksByDate = useMemo(() => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const tomorrow = new Date(today);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+
+    const groupedTasks = {
+      today: [] as ITask[],
+      tomorrow: [] as ITask[],
+      future: [] as { date: Date; tasks: ITask[] }[],
+    };
+
+    tasks.forEach((task) => {
+      const taskDate = new Date(task.date);
+      taskDate.setHours(0, 0, 0, 0);
+
+      if (taskDate.getTime() === today.getTime()) {
+        groupedTasks.today.push(task);
+      } else if (taskDate.getTime() === tomorrow.getTime()) {
+        groupedTasks.tomorrow.push(task);
+      } else if (taskDate > tomorrow) {
+        const existingGroup = groupedTasks.future.find((group) => group.date.getTime() === taskDate.getTime());
+
+        if (existingGroup) {
+          existingGroup.tasks.push(task);
+        } else {
+          groupedTasks.future.push({ date: taskDate, tasks: [task] });
+        }
+      }
+    });
+
+    // Sort tasks within each group
+    groupedTasks.today.sort((a, b) => a.date.getTime() - b.date.getTime());
+    groupedTasks.tomorrow.sort((a, b) => a.date.getTime() - b.date.getTime());
+    groupedTasks.future.sort((a, b) => a.date.getTime() - b.date.getTime());
+    groupedTasks.future.forEach((group) => {
+      group.tasks.sort((a, b) => a.date.getTime() - b.date.getTime());
+    });
+
+    return groupedTasks;
+  }, [tasks]);
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("ru-RU", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    }).format(date);
+  };
+
+  const handleDeleteTask = () => {
+    if (!editContent) return;
+    setTasks(tasks.filter((task) => task.id !== editContent.id));
+    setIsOpen(false);
+    setShowDeleteDialog(false);
+  };
+
  return (
    <div class={classes.container}>
-      <div class={classes.header}>Сегодня: {getDate}</div>
-      <div class={classes.tasks_container}>
-        {example_tasks.map((task, index) => (
-          <Task name={task} key={index} />
-        ))}
-      </div>
+      <ModalTags
+        isOpen={openModalTags}
+        setIsOpen={setOpenModalTags}
+        tagsList={example_tags}
+        value={tags}
+        onClose={() => {
+          if (!isCreating) setTags({ first: "", second: "" });
+        }}
+        onChange={setTags}
+      />
+      <ModalCalendar
+        isOpen={openModalCalendar}
+        setIsOpen={setOpenModalCalendar}
+        onClose={() => {
+          if (isEdit && !isEditModal) setCalendarDate(null);
+        }}
+        onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
+        value={calendarDate!}
+      />
+      <ModalWindow
+        isOpen={openModal}
+        setIsOpen={setIsOpen}
+        onClose={() => {
+          setIsEdit(false);
+          setEditContent(null);
+          setIsCreating(false);
+          setIsEditModal(false);
+          setTags({ first: "", second: "" });
+          setCalendarDate(null);
+        }}
+      >
+        {isEdit && editContent && (
+          <form
+            class="flex h-full w-full flex-col items-start justify-between"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isEditModal) handleSubmit(saveTask)();
+              else setIsEditModal(!isEditModal);
+            }}
+          >
+            <div class="flex w-full flex-row items-start justify-between">
+              <div class="flex flex-1 flex-col gap-1 pe-2">
+                <input
+                  class="w-full text-2xl outline-0"
+                  disabled={!isEditModal}
+                  placeholder="Название"
+                  {...register("name", {
+                    required: "Заполните название",
+                    maxLength: { value: 20, message: "Максимум 20 символов в названии" },
+                  })}
+                />
+                <textarea
+                  class="h-[5rem] w-full resize-none outline-0"
+                  disabled={!isEditModal}
+                  placeholder={isEditModal ? "Описание" : ""}
+                  {...register("description", {
+                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
+                  })}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" hidden {...register("checked")} />
+              </div>
+              <div class="flex flex-row gap-4">
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => {
+                    if (isEditModal) {
+                      handleSubmit(saveTask)();
+                      setIsEditModal(!isEditModal);
+                    } else setIsEditModal(!isEditModal);
+                  }}
+                >
+                  {isEditModal ? (
+                    <>
+                      <InboxArrowDownIcon class="size-6" />
+                      <p class="text-[0.7rem]">Сохранить</p>
+                    </>
+                  ) : (
+                    <>
+                      <PencilIcon class="size-6" />
+                      <p class="text-[0.7rem]">Редактировать</p>
+                    </>
+                  )}
+                </div>
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => setShowDeleteDialog(true)}
+                >
+                  <TrashIcon class="size-6" />
+                  <p class="text-[0.7rem]">Удалить</p>
+                </div>
+              </div>
+            </div>
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.description && <p class="text-red-500">{errors.description.message}</p>}
+            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+            {errors.tags && <p class="text-red-500">{errors.tags.message}</p>}
+            <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
+              <div
+                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setOpenModalCalendar(true);
+                  setCalendarDate(editContent.date);
+                }}
+              >
+                <CalendarDaysIcon class="size-10" />
+                <p>
+                  {Intl.DateTimeFormat("ru-RU", {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  }).format(calendarDate!)}
+                </p>
+              </div>
+              <div
+                class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setTags({ first: editContent.tags[0], second: editContent.tags[1] });
+                  setOpenModalTags(true);
+                }}
+              >
+                <p class="flex flex-row gap-2">
+                  <BookOpenIcon class="size-5" />
+                  {editContent.tags[0]}
+                </p>
+                <p class="flex flex-row gap-2">
+                  <DocumentDuplicateIcon class="size-5" />
+                  {editContent.tags[1]}
+                </p>
+              </div>
+            </div>
+          </form>
+        )}
+        {isCreating && (
+          <form
+            class="flex h-full w-full flex-col items-start justify-between"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSubmit((data) => saveTask({ ...data, id: uuid() }))();
+            }}
+          >
+            <div class="flex w-full flex-1 flex-row items-start justify-between">
+              <div class="me-4 flex h-full flex-1 flex-col gap-1">
+                <input
+                  class="text-2xl outline-0"
+                  maxLength={20}
+                  placeholder="Название"
+                  {...register("name", { required: "Заполните название" })}
+                />
+                <textarea
+                  class="mb-10 w-full flex-1 resize-none outline-0"
+                  placeholder="Описание"
+                  maxLength={200}
+                  {...register("description")}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" checked={false} hidden {...register("checked")} />
+              </div>
+              <div class="flex flex-row gap-3 self-start">
+                <CalendarDaysIcon
+                  class="size-10 cursor-pointer"
+                  onClick={() => {
+                    setOpenModalCalendar(true);
+                    setCalendarDate(calendarDate ?? new Date());
+                  }}
+                />
+                <BookmarkIcon class="ms-4 size-10 cursor-pointer" onClick={() => setOpenModalTags(true)} />
+              </div>
+            </div>
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+            {errors.tags && <p class="text-red-500">{errors.tags.message}</p>}
+            <div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row md:self-start">
+              <Button
+                className="text-sm"
+                onClick={() => {
+                  setIsOpen(false);
+                }}
+              >
+                Отмена
+              </Button>
+              <Button color="red" type="submit">
+                Добавить задачу
+              </Button>
+            </div>
+          </form>
+        )}
+      </ModalWindow>
+      <Dialog
+        isOpen={showDeleteDialog}
+        setIsOpen={setShowDeleteDialog}
+        title="Удаление задачи"
+        content="Вы уверены, что хотите удалить эту задачу?"
+        onConfirm={handleDeleteTask}
+        confirmText="Удалить"
+        cancelText="Отмена"
+      />
+      {tasks.length > 0 ? (
+        <>
+          <div class={classes.header}>Сегодня: {getDate}</div>
+          <div class={classes.tasks_container}>
+            {groupTasksByDate.today.length > 0 ? (
+              <div class="w-full">
+                {groupTasksByDate.today.map((task) => (
+                  <Task
+                    name={task.name}
+                    key={task.id}
+                    checked={task.checked}
+                    onClick={() => {
+                      setIsOpen(true);
+                      setIsEdit(true);
+                      setEditContent(task);
+                      setCalendarDate(task.date);
+                    }}
+                    onMarkClick={() => {
+                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    }}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div class="w-full text-center text-xl">Задач на сегодня нет</div>
+            )}
+            {groupTasksByDate.tomorrow.length > 0 && (
+              <div class="flex w-full flex-col gap-3 md:gap-10">
+                <div class="w-full text-3xl font-semibold md:text-5xl">Завтра</div>
+                {groupTasksByDate.tomorrow.map((task) => (
+                  <Task
+                    name={task.name}
+                    key={task.id}
+                    checked={task.checked}
+                    onClick={() => {
+                      setIsOpen(true);
+                      setIsEdit(true);
+                      setEditContent(task);
+                      setCalendarDate(task.date);
+                    }}
+                    onMarkClick={() => {
+                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+            {groupTasksByDate.future.map((group) => (
+              <div class="flex w-full flex-col gap-3 md:gap-10" key={group.date.getTime()}>
+                <div class="w-full text-3xl font-semibold md:text-5xl">{formatDate(group.date)}</div>
+                {group.tasks.map((task) => (
+                  <Task
+                    name={task.name}
+                    key={task.id}
+                    checked={task.checked}
+                    onClick={() => {
+                      setIsOpen(true);
+                      setIsEdit(true);
+                      setEditContent(task);
+                      setCalendarDate(task.date);
+                    }}
+                    onMarkClick={() => {
+                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    }}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+          <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
+            <div
+              class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
+              onClick={() => {
+                setIsCreating(true);
+                setIsOpen(true);
+              }}
+            >
+              <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">
+              <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
+                <MagnifyingGlassIcon class="size-12" />
+              </div>
+              <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" />
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
+          <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
+            <div
+              class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out hover:bg-[rgb(251,194,199,0.7)]"
+              onClick={() => {
+                setIsCreating(true);
+                setIsOpen(true);
+              }}
+            >
+              <PlusIcon />
+            </div>
+          </div>
+        </>
+      )}
    </div>
  );
 };
--- a/src/utils/status-system.ts
+++ b/src/utils/status-system.ts
@@ -0,0 +1,26 @@
+export interface StatusLevel {
+  name: string;
+  minPoints: number;
+}
+
+export const STATUS_LEVELS: StatusLevel[] = [
+  { name: "Завтра точно начну", minPoints: 0 },
+  { name: "Всё по плану (плана нет)", minPoints: 25 },
+  { name: "Гений прокрастинации (но всё сделал)", minPoints: 50 },
+  { name: "Хвостоуничтожитель 3000", minPoints: 75 },
+  { name: "Легенда планирования", minPoints: 90 }
+];
+
+const POINTS_PER_TASK = 5;
+
+export const calculatePoints = (completedTasks: number): number => {
+  return Math.min(completedTasks * POINTS_PER_TASK, 100);
+};
+
+export const getCurrentStatus = (points: number): string => {
+  const status = STATUS_LEVELS
+    .slice()
+    .reverse()
+    .find(level => points >= level.minPoints);
+  return status?.name || STATUS_LEVELS[0].name;
+};
Author	SHA1	Message	Date
Sergey Elpashev	5c13774e63	hotfix: mobile create button	2025-04-27 14:52:30 +03:00
Sergey Elpashev	5c0a7a1b5c	feat: status-system	2025-04-27 14:34:10 +03:00
Sergey Elpashev	5086b64200	feat: tasks group by date and delete	2025-04-27 14:05:13 +03:00
Sergey Elpashev	a2fe9bcfd7	feat: new tasks calendar	2025-04-27 14:04:51 +03:00
Sergey Elpashev	ef4d1be2bc	feat: working calendar	2025-04-27 13:32:17 +03:00
Sergey Elpashev	4ff0b441f3	feat: mobile tags adapt	2025-04-27 12:20:00 +03:00
Sergey Elpashev	e8ded7f2ae	feat: tags on tasks	2025-04-25 15:20:20 +03:00
Sergey Elpashev	320872ddc9	fix: edit info reset after date change	2025-04-23 16:59:34 +03:00
Sergey Elpashev	9841da8b88	feat: task status change	2025-04-23 16:45:06 +03:00
Sergey Elpashev	b091e8d20d	feat: create task form	2025-04-23 16:09:41 +03:00
Sergey Elpashev	c1246939cd	feat: tasks editing form	2025-04-23 15:17:10 +03:00
Sergey Elpashev	eb12afe763	feat: fixed login	2025-04-23 13:47:16 +03:00
Sergey Elpashev	c629f0dcf8	feat: form hook	2025-04-23 12:32:27 +03:00
Sergey Elpashev	2a7d41bba5	feat: sort tasks by date	2025-04-22 12:46:45 +03:00
Sergey Elpashev	d7c406a930	feat: calendar on create	2025-04-22 12:39:34 +03:00
Sergey Elpashev	7a98dbfe91	feat: modal calendar in edit tasks	2025-04-22 12:31:55 +03:00
Sergey Elpashev	607637b5ca	feat: modal calendar styles	2025-04-21 17:00:03 +03:00
Sergey Elpashev	66d7cf0532	todo: modal calendar	2025-04-21 16:37:38 +03:00
Sergey Elpashev	ce55ca5bfe	feat: some style fixes	2025-04-21 16:37:25 +03:00
Sergey Elpashev	174ea24f4e	feat: save tasks in localstorage	2025-04-21 16:16:52 +03:00
Sergey Elpashev	c4eca9b5e6	feat: add and edit task modal	2025-04-21 16:01:19 +03:00
Sergey Elpashev	a99be691c7	feat: primereact lib	2025-04-20 14:27:22 +03:00
Sergey Elpashev	bdb3effaf0	feat: calendar component	2025-04-20 14:04:39 +03:00
Sergey Elpashev	97879cc41b	feat: fixed todos in calendar	2025-04-17 12:54:08 +03:00
Sergey Elpashev	5288637d19	feat: pseudo login	2025-04-16 15:00:44 +03:00
Sergey Elpashev	ae73b5d256	feat: input params	2025-04-16 14:33:55 +03:00
Sergey Elpashev	a2b1f761ac	feat: some style fixes	2025-04-16 14:33:43 +03:00
Sergey Elpashev	a00ec135f1	feat: empty tasks page style	2025-04-16 14:13:34 +03:00
Sergey Elpashev	1b1c45935b	feat: tasks buttons	2025-04-15 16:42:35 +03:00
Sergey Elpashev	9d6f0ce73d	feat: tasks width	2025-04-15 15:26:37 +03:00
Sergey Elpashev	860b628834	feat: mobile adapt	2025-04-15 12:57:30 +03:00
Sergey Elpashev	af335ab4a8	feat: styles and mark tasks	2025-04-15 12:43:53 +03:00