feat: actions page for mobiles

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);
+    }
+}

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<Props> = ({ linkData }) => {
+    return (
+        <Link
+            href={linkData.href}
+            className={styles.link}>
+            <Button
+                w={"100%"}
+                h={"100px"}
+                variant={"default"}>
+                <Stack
+                    px={"xs"}
+                    w={"100%"}
+                    align={"center"}
+                    gap={"xs"}>
+                    <ThemeIcon size={"sm"}>
+                        <linkData.icon />
+                    </ThemeIcon>
+                    <Text>{linkData.label}</Text>
+                </Stack>
+            </Button>
+        </Link>
+    );
+};
+
+export default Action;

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 (
+        <PageBlock fullScreenMobile>
+            <Stack p={"xs"}>
+                <ProjectSelect
+                    onChange={project =>
+                        setSelectedProjectId(project?.id ?? null)
+                    }
+                    value={selectedProject}
+                    data={projects}
+                />
+                <SimpleGrid
+                    type={"container"}
+                    cols={2}>
+                    {filteredMobileButtonsData.map((data, index) => (
+                        <Action
+                            linkData={data}
+                            key={index}
+                        />
+                    ))}
+                </SimpleGrid>
+            </Stack>
+        </PageBlock>
+    );
+};
+
+export default PageBody;

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;

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 (
+        <Suspense
+            fallback={
+                <Center h="50vh">
+                    <Loader size="lg" />
+                </Center>
+            }>
+            <PageContainer>
+                <PageBody />
+            </PageContainer>
+        </Suspense>
+    );
+}