From 428a6aca82b4cc7cf44ad5909f630a55b9f8fbcc Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Tue, 7 Oct 2025 09:48:05 +0400 Subject: [PATCH] feat: actions page for mobiles --- .../components/Action/Action.module.css | 15 ++++++ src/app/actions/components/Action/Action.tsx | 36 ++++++++++++++ .../actions/components/PageBody/PageBody.tsx | 48 +++++++++++++++++++ src/app/actions/data/mobileButtonsData.tsx | 26 ++++++++++ src/app/actions/page.tsx | 19 ++++++++ .../layout/Footer/data/buttonsData.ts | 10 ++-- .../layout/Footer/types/LinkData.ts | 9 ---- .../layout/Navbar/components/NavbarLinks.tsx | 4 +- .../layout/Navbar/data/linksData.ts | 2 +- .../Clients/components/ClientDataForm.tsx | 2 +- .../layout/Navbar => }/types/LinkData.ts | 0 11 files changed, 154 insertions(+), 17 deletions(-) create mode 100644 src/app/actions/components/Action/Action.module.css create mode 100644 src/app/actions/components/Action/Action.tsx create mode 100644 src/app/actions/components/PageBody/PageBody.tsx create mode 100644 src/app/actions/data/mobileButtonsData.tsx create mode 100644 src/app/actions/page.tsx delete mode 100644 src/components/layout/Footer/types/LinkData.ts rename src/{components/layout/Navbar => }/types/LinkData.ts (100%) diff --git a/src/app/actions/components/Action/Action.module.css b/src/app/actions/components/Action/Action.module.css new file mode 100644 index 0000000..043235d --- /dev/null +++ b/src/app/actions/components/Action/Action.module.css @@ -0,0 +1,15 @@ +.link { + width: 100%; + border-radius: var(--mantine-radius-lg); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + + @mixin light { + color: var(--mantine-color-gray-7); + } + @mixin dark { + color: var(--mantine-color-dark-0); + } +} diff --git a/src/app/actions/components/Action/Action.tsx b/src/app/actions/components/Action/Action.tsx new file mode 100644 index 0000000..97f544b --- /dev/null +++ b/src/app/actions/components/Action/Action.tsx @@ -0,0 +1,36 @@ +import { FC } from "react"; +import Link from "next/link"; +import { Button, Stack, Text } from "@mantine/core"; +import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon"; +import LinkData from "@/types/LinkData"; +import styles from "./Action.module.css"; + +type Props = { + linkData: LinkData; +}; + +const Action: FC = ({ linkData }) => { + return ( + + + + ); +}; + +export default Action; diff --git a/src/app/actions/components/PageBody/PageBody.tsx b/src/app/actions/components/PageBody/PageBody.tsx new file mode 100644 index 0000000..1a7839b --- /dev/null +++ b/src/app/actions/components/PageBody/PageBody.tsx @@ -0,0 +1,48 @@ +"use client"; + +import { useMemo } from "react"; +import { SimpleGrid, Stack } from "@mantine/core"; +import Action from "@/app/actions/components/Action/Action"; +import mobileButtonsData from "@/app/actions/data/mobileButtonsData"; +import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext"; +import PageBlock from "@/components/layout/PageBlock/PageBlock"; +import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect"; + +const PageBody = () => { + const { selectedProject, setSelectedProjectId, projects, modulesSet } = + useProjectsContext(); + + const filteredMobileButtonsData = useMemo( + () => + mobileButtonsData.filter( + link => !link.moduleName || modulesSet.has(link.moduleName) + ), + [modulesSet] + ); + + return ( + + + + setSelectedProjectId(project?.id ?? null) + } + value={selectedProject} + data={projects} + /> + + {filteredMobileButtonsData.map((data, index) => ( + + ))} + + + + ); +}; + +export default PageBody; diff --git a/src/app/actions/data/mobileButtonsData.tsx b/src/app/actions/data/mobileButtonsData.tsx new file mode 100644 index 0000000..b01b2bc --- /dev/null +++ b/src/app/actions/data/mobileButtonsData.tsx @@ -0,0 +1,26 @@ +import { IconColumns, IconFileBarcode, IconUsers } from "@tabler/icons-react"; +import { ModuleNames } from "@/modules/modules"; +import LinkData from "@/types/LinkData"; + +const mobileButtonsData: LinkData[] = [ + { + icon: IconUsers, + label: "Клиенты", + href: "/clients", + moduleName: ModuleNames.CLIENTS, + }, + { + icon: IconColumns, + label: "Услуги", + href: "/services", + moduleName: ModuleNames.FULFILLMENT_BASE, + }, + { + icon: IconFileBarcode, + label: "Шаблоны штрихкодов", + href: "/barcode-templates", + moduleName: ModuleNames.FULFILLMENT_BASE, + }, +]; + +export default mobileButtonsData; diff --git a/src/app/actions/page.tsx b/src/app/actions/page.tsx new file mode 100644 index 0000000..d837a0d --- /dev/null +++ b/src/app/actions/page.tsx @@ -0,0 +1,19 @@ +import { Suspense } from "react"; +import { Center, Loader } from "@mantine/core"; +import PageContainer from "@/components/layout/PageContainer/PageContainer"; +import PageBody from "./components/PageBody/PageBody"; + +export default async function ActionsPage() { + return ( + + + + }> + + + + + ); +} diff --git a/src/components/layout/Footer/data/buttonsData.ts b/src/components/layout/Footer/data/buttonsData.ts index 27cfb65..b5a80c1 100644 --- a/src/components/layout/Footer/data/buttonsData.ts +++ b/src/components/layout/Footer/data/buttonsData.ts @@ -1,10 +1,10 @@ import { IconCalendarWeekFilled, - IconCircleDotted, + IconLayoutGrid, IconLayoutKanban, IconTable, } from "@tabler/icons-react"; -import LinkData from "@/components/layout/Navbar/types/LinkData"; +import LinkData from "@/types/LinkData"; const buttonsData: LinkData[] = [ { @@ -23,9 +23,9 @@ const buttonsData: LinkData[] = [ href: "/deals?view=schedule", }, { - icon: IconCircleDotted, - label: "Label 3", - href: "/hihihaha", + icon: IconLayoutGrid, + label: "Действия", + href: "/actions", }, ]; diff --git a/src/components/layout/Footer/types/LinkData.ts b/src/components/layout/Footer/types/LinkData.ts deleted file mode 100644 index b0911ca..0000000 --- a/src/components/layout/Footer/types/LinkData.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { IconPlus } from "@tabler/icons-react"; - -type LinkData = { - icon: typeof IconPlus; - label: string; - href: string; -}; - -export default LinkData; diff --git a/src/components/layout/Navbar/components/NavbarLinks.tsx b/src/components/layout/Navbar/components/NavbarLinks.tsx index 730a03d..e9810ce 100644 --- a/src/components/layout/Navbar/components/NavbarLinks.tsx +++ b/src/components/layout/Navbar/components/NavbarLinks.tsx @@ -5,10 +5,12 @@ import { usePathname, useRouter } from "next/navigation"; import { Group, Stack, Text } from "@mantine/core"; import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext"; import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon"; +import useIsMobile from "@/hooks/utils/useIsMobile"; import linksData from "../data/linksData"; import NavbarClickable from "./NavbarClickable"; const NavbarLinks = () => { + const isMobile = useIsMobile(); const pathname = usePathname(); const router = useRouter(); const { modulesSet, selectedProject } = useProjectsContext(); @@ -21,7 +23,7 @@ const NavbarLinks = () => { ); useEffect(() => { - if (pathname !== "/deals") router.push("/deals"); + if (!isMobile && pathname !== "/deals") router.push("/deals"); }, [selectedProject]); return ( diff --git a/src/components/layout/Navbar/data/linksData.ts b/src/components/layout/Navbar/data/linksData.ts index f578176..fa03ef2 100644 --- a/src/components/layout/Navbar/data/linksData.ts +++ b/src/components/layout/Navbar/data/linksData.ts @@ -4,8 +4,8 @@ import { IconLayoutKanban, IconUsers, } from "@tabler/icons-react"; -import LinkData from "@/components/layout/Navbar/types/LinkData"; import { ModuleNames } from "@/modules/modules"; +import LinkData from "@/types/LinkData"; const linksData: LinkData[] = [ { diff --git a/src/modules/dealModularEditorTabs/Clients/components/ClientDataForm.tsx b/src/modules/dealModularEditorTabs/Clients/components/ClientDataForm.tsx index baf62f2..a1a3144 100644 --- a/src/modules/dealModularEditorTabs/Clients/components/ClientDataForm.tsx +++ b/src/modules/dealModularEditorTabs/Clients/components/ClientDataForm.tsx @@ -51,11 +51,11 @@ const ClientDataForm: FC = () => { flex={1} /> diff --git a/src/components/layout/Navbar/types/LinkData.ts b/src/types/LinkData.ts similarity index 100% rename from src/components/layout/Navbar/types/LinkData.ts rename to src/types/LinkData.ts