feat: add home sheet content

src/locales/en/en.json

@@ -26,6 +26,19 @@
     "settings": "Settings",
     "logout": "Logout"
   },
+  "menu": {
+    "routes": "Routes",
+    "manageApps": "Manage apps",
+    "browserHistory": "Browser history",
+    "messengers": "Messengers",
+    "calls": "Calls",
+    "permissions": "Permissions",
+    "recordingEnvironment": "Recording environment",
+    "removeDevice": "Remove device"
+  },
+  "home": {
+    "kmh": "km/h"
+  },
   "session": {
     "activeTill": "Active till",
     "noSubscription": "No subscription",

src/locales/ru/ru.json

@@ -26,6 +26,19 @@
     "settings": "Настройки",
     "logout": "Выйти"
   },
+  "menu": {
+    "routes": "Маршруты",
+    "manageApps": "Приложения",
+    "browserHistory": "История браузера",
+    "messengers": "Мессенджеры",
+    "calls": "Звонки",
+    "permissions": "Разрешения",
+    "recordingEnvironment": "Запись окружения",
+    "removeDevice": "Удалить устройство"
+  },
+  "home": {
+    "kmh": "км/ч"
+  },
   "session": {
     "activeTill": "Активен до",
     "noSubscription": "Нет подписки",

src/pages/BrowserHistory/BrowserHistory.tsx

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

src/pages/BrowserHistory/index.ts

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

src/pages/Calls/Calls.tsx

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

src/pages/Calls/index.ts

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

src/pages/Home/Home.css

@@ -4,4 +4,59 @@
 
 .react-modal-sheet-drag-indicator {
     background: var(--primary-color) !important;
+}
+
+.home__sheet__info {
+    padding: 1rem;
+    border-radius: 10px;
+    background: var(--primary-color);
+    color: var(--on-text-color);
+    margin: 0 0.5rem 1rem 0.5rem;
+}
+
+.home__sheet__status {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.home__sheet__status div {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+
+.home__sheet__device {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.home__menu {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, auto);
+    gap: 0.5rem;
+}
+
+.home__menu__link {
+    min-width: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    text-align: center;
+    padding: 0.5rem;
+    text-decoration: none;
+    background: var(--background-color);
+    border-radius: 10px;
+    color: var(--text-color);
+    font-size: 0.8rem;
+}
+
+.home__menu__icon {
+    font-size: 1.5rem;
 }
\ No newline at end of file

src/pages/Home/Home.tsx

@@ -2,9 +2,25 @@ import React from "react";
 import "./Home.css";
 import { Sheet, type SheetRef } from "react-modal-sheet";
 import { useRef } from "react";
+import { FaRegMap } from "react-icons/fa";
+import { Link } from "react-router-dom";
+import { LuShield } from "react-icons/lu";
+import {
+  IoBatteryHalfOutline,
+  IoCallOutline,
+  IoGlobeSharp,
+  IoPhonePortraitOutline,
+  IoRecordingSharp,
+} from "react-icons/io5";
+import { PiChatsCircle } from "react-icons/pi";
+import { IoMdInformationCircleOutline } from "react-icons/io";
+import { RiDeleteBinLine } from "react-icons/ri";
+import { BsPersonStanding } from "react-icons/bs";
+import { useTranslation } from "react-i18next";
 
 const Home: React.FC = () => {
   const ref = useRef<SheetRef>(null);
+  const { t } = useTranslation();
 
   return (
     <>
@@ -16,9 +32,72 @@ const Home: React.FC = () => {
         snapPoints={[0.6, 0.4]}
         style={{ zIndex: 1 }}
       >
-        <Sheet.Container style={{ boxShadow: "none" }}>
+        <Sheet.Container
+          style={{ boxShadow: "none" }}
+          className="home__sheet__content"
+        >
           <Sheet.Header />
-          <Sheet.Content></Sheet.Content>
+          <Sheet.Content>
+            <div className="home__sheet__info">
+              <div className="home__sheet__status">
+                <div>
+                  <IoBatteryHalfOutline className="home__sheet__status__icon" />
+                  <p>100%</p>
+                </div>
+                <div>
+                  <BsPersonStanding className="home__sheet__status__icon" />
+                  <p>0 {t("home.kmh")}</p>
+                </div>
+              </div>
+
+              <div className="home__sheet__device">
+                <IoPhonePortraitOutline className="home__sheet__device__icon" />
+                <p>Tecno</p>
+              </div>
+            </div>
+
+            <div className="home__menu">
+              <Link to={"/home/routes"} className="home__menu__link">
+                <FaRegMap className="home__menu__icon" />
+                <p>{t("menu.routes")}</p>
+              </Link>
+
+              <Link to={"/home/manage-apps"} className="home__menu__link">
+                <LuShield className="home__menu__icon" />
+                <p>{t("menu.manageApps")}</p>
+              </Link>
+
+              <Link to={"/home/browser-history"} className="home__menu__link">
+                <IoGlobeSharp className="home__menu__icon" />
+                <p>{t("menu.browserHistory")}</p>
+              </Link>
+
+              <Link to={"/home/messengers"} className="home__menu__link">
+                <PiChatsCircle className="home__menu__icon" />
+                <p>{t("menu.messengers")}</p>
+              </Link>
+
+              <Link to={"/home/calls"} className="home__menu__link">
+                <IoCallOutline className="home__menu__icon" />
+                <p>{t("menu.calls")}</p>
+              </Link>
+
+              <Link to={"/home/permissions"} className="home__menu__link">
+                <IoMdInformationCircleOutline className="home__menu__icon" />
+                <p>{t("menu.permissions")}</p>
+              </Link>
+
+              <Link to={"/home/recording"} className="home__menu__link">
+                <IoRecordingSharp className="home__menu__icon" />
+                <p>{t("menu.recordingEnvironment")}</p>
+              </Link>
+
+              <div className="home__menu__link">
+                <RiDeleteBinLine className="home__menu__icon" />
+                <p>{t("menu.removeDevice")}</p>
+              </div>
+            </div>
+          </Sheet.Content>
         </Sheet.Container>
       </Sheet>
     </>

src/pages/ManageApps/ManageApps.tsx

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

src/pages/ManageApps/index.ts

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

src/pages/Messengers/Messengers.tsx

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

src/pages/Messengers/index.ts

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

src/pages/Permissions/Permissions.tsx

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

src/pages/Permissions/index.ts

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

src/pages/Recording/Recording.tsx

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

src/pages/Recording/index.ts

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

src/pages/Routes/Routes.tsx

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

src/pages/Routes/index.ts

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

src/routes/Router.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {
   createBrowserRouter,
   Navigate,
+  Outlet,
   RouterProvider,
 } from "react-router-dom";
 import NotFound from "../pages/NotFound";
@@ -16,6 +17,13 @@ import Subscription from "../pages/Subscription";
 import Settings from "../pages/Settings";
 import Pincode from "../pages/Pincode";
 import { TG_USER_ID } from "../constants/constants";
+import Routes from "../pages/Routes";
+import ManageApps from "../pages/ManageApps";
+import BrowserHistory from "../pages/BrowserHistory";
+import Messengers from "../pages/Messengers";
+import Calls from "../pages/Calls";
+import Permissions from "../pages/Permissions";
+import Recording from "../pages/Recording";
 
 const Router: React.FC = () => {
   const isAuthenticated = !!localStorage.getItem(`token-${TG_USER_ID}`);
@@ -62,6 +70,40 @@ const Router: React.FC = () => {
       ],
     },
     {
+      path: "/home",
+      element: <ProtectedRoute element={<Outlet />} redirectTo="/" />,
+      children: [
+        {
+          path: "routes",
+          element: <Routes />,
+        },
+        {
+          path: "manage-apps",
+          element: <ManageApps />,
+        },
+        {
+          path: "browser-history",
+          element: <BrowserHistory />,
+        },
+        {
+          path: "messengers",
+          element: <Messengers />,
+        },
+        {
+          path: "calls",
+          element: <Calls />,
+        },
+        {
+          path: "permissions",
+          element: <Permissions />,
+        },
+        {
+          path: "recording",
+          element: <Recording />,
+        },
+      ],
+    },
+    {
       path: "/pincode",
       element: <Pincode />,
     },