feat: add manage apps

src/locales/en/en.json

@@ -39,6 +39,13 @@
   "home": {
     "kmh": "km/h"
   },
+  "manage": {
+    "usage": "Manage Usage",
+    "blockUnwantedApps": "Block unwanted apps",
+    "setTimeLimit": "Set phone usage time limit",
+    "lockDevice": "Lock device",
+    "unlockDevice": "Unlock device"
+  },
   "session": {
     "activeTill": "Active till",
     "noSubscription": "No subscription",

src/locales/ru/ru.json

@@ -39,6 +39,13 @@
   "home": {
     "kmh": "км/ч"
   },
+  "manage": {
+    "usage": "Управление использованием",
+    "blockUnwantedApps": "Блокировка нежелательных приложений",
+    "setTimeLimit": "Установить ограничение по времени",
+    "lockDevice": "Заблокировать устройство",
+    "unlockDevice": "Разблокировать устройство"
+  },
   "session": {
     "activeTill": "Активен до",
     "noSubscription": "Нет подписки",

src/pages/BlockApps/BlockApps.tsx

+import React from "react";
+import "./BlockApps.css";
+
+const BlockApps: React.FC = () => {
+  return <div>BlockApps</div>;
+};
+
+export default BlockApps;

src/pages/BlockApps/index.ts

+export { default } from "./BlockApps";

src/pages/ManageApps/ManageApps.css

+.manageapps__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.manageapps__content__title {
+    margin-top: 1rem;
+}
+
+.manageapps__content__link {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    border-radius: 10px;
+    text-decoration: none;
+    color: var(--text-color);
+    background-color: var(--content-bg-color);
+    cursor: pointer;
+    margin-bottom: 0.5rem;
+}
+
+.manageapps__content__icon {
+    font-size: 5rem;
+    min-width: 80px;
+    color: var(--primary-color);
+}
+
+.manageapps__content__link p {
+    font-size: 1.2rem;
+}
\ No newline at end of file

src/pages/ManageApps/ManageApps.tsx

 import React from "react";
 import "./ManageApps.css";
+import SectionHeader from "../../layouts/SectionHeader";
+import { LuShield } from "react-icons/lu";
+import {
+  IoAlarmOutline,
+  IoLockClosedOutline,
+  IoLockOpenOutline,
+} from "react-icons/io5";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 const ManageApps: React.FC = () => {
-  return <div>ManageApps</div>;
+  const { t } = useTranslation();
+
+  return (
+    <div className="manageapps wrapper">
+      <SectionHeader to="/home" />
+
+      <div className="manageapps__content">
+        <h3 className="manageapps__content__title">{t("manage.usage")}</h3>
+
+        <Link
+          to={"/home/manage-apps/block-apps"}
+          className="manageapps__content__link"
+        >
+          <LuShield className="manageapps__content__icon" />
+          <p>{t("manage.blockUnwantedApps")}</p>
+        </Link>
+
+        <Link
+          to={"/home/manage-apps/usage-limits"}
+          className="manageapps__content__link"
+        >
+          <IoAlarmOutline className="manageapps__content__icon" />
+          <p>{t("manage.setTimeLimit")}</p>
+        </Link>
+
+        <div className="manageapps__content__link">
+          <IoLockClosedOutline className="manageapps__content__icon" />
+          <p>{t("manage.lockDevice")}</p>
+        </div>
+
+        <div className="manageapps__content__link">
+          <IoLockOpenOutline className="manageapps__content__icon" />
+          <p>{t("manage.unlockDevice")}</p>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default ManageApps;

src/pages/UsageLimits/UsageLimits.tsx

+import React from "react";
+import "./UsageLimits.css";
+
+const UsageLimits: React.FC = () => {
+  return <div>UsageLimits</div>;
+};
+
+export default UsageLimits;

src/pages/UsageLimits/index.ts

+export { default } from "./UsageLimits";

src/routes/Router.tsx

@@ -24,6 +24,8 @@ import Messengers from "../pages/Messengers";
 import Calls from "../pages/Calls";
 import Permissions from "../pages/Permissions";
 import Recording from "../pages/Recording";
+import BlockApps from "../pages/BlockApps";
+import UsageLimits from "../pages/UsageLimits";
 
 const Router: React.FC = () => {
   const isAuthenticated = !!localStorage.getItem(`token-${TG_USER_ID}`);
@@ -79,7 +81,20 @@ const Router: React.FC = () => {
         },
         {
           path: "manage-apps",
-          element: <ManageApps />,
+          children: [
+            {
+              index: true,
+              element: <ManageApps />,
+            },
+            {
+              path: "block-apps",
+              element: <BlockApps />,
+            },
+            {
+              path: "usage-limits",
+              element: <UsageLimits />,
+            },
+          ],
         },
         {
           path: "browser-history",

src/styles/global.css

@@ -46,7 +46,7 @@ html[data-theme='light'] {
     --on-background-color: #000000;
     --content-bg-color: #FFFFFF;
     --text-color: #000000;
-    --on-text-color: #ffffff
+    --on-text-color: #ffffff;
 }
 
 html[data-theme='dark'] {