feat: prettier

2024-09-27 04:47:04 +03:00
parent c5f839d9ef
commit de4fe450ab
253 changed files with 11322 additions and 10004 deletions
--- a/src/components/Navbar/LinksGroup/LinksGroup.module.css
+++ b/src/components/Navbar/LinksGroup/LinksGroup.module.css
@@ -1,34 +1,47 @@
 .control {
-  font-weight: 500;
-  display: block;
-  width: 100%;
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
-  color: var(--mantine-color-text);
-  font-size: var(--mantine-font-size-sm);
+    font-weight: 500;
+    display: block;
+    width: 100%;
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+    color: var(--mantine-color-text);
+    font-size: var(--mantine-font-size-sm);

-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
-    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
-  }
+    @mixin hover {
+        background-color: light-dark(
+            var(--mantine-color-gray-0),
+            var(--mantine-color-dark-7)
+        );
+        color: light-dark(
+            var(--mantine-color-black),
+            var(--mantine-color-dark-0)
+        );
+    }
 }

 .link {
-  font-weight: 500;
-  display: block;
-  text-decoration: none;
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
-  padding-left: var(--mantine-spacing-md);
-  margin-left: var(--mantine-spacing-xl);
-  font-size: var(--mantine-font-size-sm);
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
-  border-left: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    font-weight: 500;
+    display: block;
+    text-decoration: none;
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+    padding-left: var(--mantine-spacing-md);
+    margin-left: var(--mantine-spacing-xl);
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    border-left: 1px solid
+        light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));

-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
-    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
-  }
+    @mixin hover {
+        background-color: light-dark(
+            var(--mantine-color-gray-0),
+            var(--mantine-color-dark-7)
+        );
+        color: light-dark(
+            var(--mantine-color-black),
+            var(--mantine-color-dark-0)
+        );
+    }
 }

 .chevron {
-  transition: transform 200ms ease;
-}
+    transition: transform 200ms ease;
+}
--- a/src/components/Navbar/LinksGroup/LinksGroup.tsx
+++ b/src/components/Navbar/LinksGroup/LinksGroup.tsx
@@ -1,8 +1,15 @@
-import {useState} from 'react';
-import {Box, Collapse, Group, rem, ThemeIcon, UnstyledButton} from '@mantine/core';
-import {IconCalendarStats, IconChevronRight} from '@tabler/icons-react';
-import classes from './LinksGroup.module.css';
-import {Link} from "@tanstack/react-router";
+import { useState } from "react";
+import {
+    Box,
+    Collapse,
+    Group,
+    rem,
+    ThemeIcon,
+    UnstyledButton,
+} from "@mantine/core";
+import { IconCalendarStats, IconChevronRight } from "@tabler/icons-react";
+import classes from "./LinksGroup.module.css";
+import { Link } from "@tanstack/react-router";

 interface LinksGroupProps {
    icon: React.FC<any>;
@@ -11,28 +18,36 @@ interface LinksGroupProps {
    links?: { label: string; link: string }[];
 }

-export function LinksGroup({icon: Icon, label, initiallyOpened, links}: LinksGroupProps) {
+export function LinksGroup({
+    icon: Icon,
+    label,
+    initiallyOpened,
+    links,
+}: LinksGroupProps) {
    const hasLinks = Array.isArray(links);
    const [opened, setOpened] = useState(initiallyOpened || false);
-    const items = (hasLinks ? links : []).map((link) => (
-        <Link to={link.link}
-              className={classes.link}
-              key={link.label}
-
-        >
-
+    const items = (hasLinks ? links : []).map(link => (
+        <Link
+            to={link.link}
+            className={classes.link}
+            key={link.label}>
            {link.label}
        </Link>
-
    ));

    return (
        <>
-            <UnstyledButton onClick={() => setOpened((o) => !o)} className={classes.control}>
-                <Group justify="space-between" gap={0}>
-                    <Box style={{display: 'flex', alignItems: 'center'}}>
-                        <ThemeIcon variant="light" size={30}>
-                            <Icon style={{width: rem(18), height: rem(18)}}/>
+            <UnstyledButton
+                onClick={() => setOpened(o => !o)}
+                className={classes.control}>
+                <Group
+                    justify="space-between"
+                    gap={0}>
+                    <Box style={{ display: "flex", alignItems: "center" }}>
+                        <ThemeIcon
+                            variant="light"
+                            size={30}>
+                            <Icon style={{ width: rem(18), height: rem(18) }} />
                        </ThemeIcon>
                        <Box ml="md">{label}</Box>
                    </Box>
@@ -43,7 +58,7 @@ export function LinksGroup({icon: Icon, label, initiallyOpened, links}: LinksGro
                            style={{
                                width: rem(16),
                                height: rem(16),
-                                transform: opened ? 'rotate(-90deg)' : 'none',
+                                transform: opened ? "rotate(-90deg)" : "none",
                            }}
                        />
                    )}
@@ -55,19 +70,21 @@ export function LinksGroup({icon: Icon, label, initiallyOpened, links}: LinksGro
 }

 const mockdata = {
-    label: 'Releases',
+    label: "Releases",
    icon: IconCalendarStats,
    links: [
-        {label: 'Upcoming releases', link: '/'},
-        {label: 'Previous releases', link: '/'},
-        {label: 'Releases schedule', link: '/'},
+        { label: "Upcoming releases", link: "/" },
+        { label: "Previous releases", link: "/" },
+        { label: "Releases schedule", link: "/" },
    ],
 };

 export function NavbarLinksGroup() {
    return (
-        <Box mih={220} p="md">
+        <Box
+            mih={220}
+            p="md">
            <LinksGroup {...mockdata} />
        </Box>
    );
-}
+}
--- a/src/components/Navbar/Logo.tsx
+++ b/src/components/Navbar/Logo.tsx
@@ -1,12 +1,17 @@
-export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
+export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
    return (
-        <svg  {...props} version="1.0" xmlns="http://www.w3.org/2000/svg"
-             viewBox="0 0 1024.000000 1024.000000"
-              preserveAspectRatio="xMidYMid meet">
-
-            <g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
-               fill="#2a75ec" stroke="none">
-                <path d="M2600 7290 l0 -760 690 0 690 0 0 196 0 195 728 -4 c613 -3 743 -7
+        <svg
+            {...props}
+            version="1.0"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1024.000000 1024.000000"
+            preserveAspectRatio="xMidYMid meet">
+            <g
+                transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+                fill="#2a75ec"
+                stroke="none">
+                <path
+                    d="M2600 7290 l0 -760 690 0 690 0 0 196 0 195 728 -4 c613 -3 743 -7
    831 -20 57 -10 106 -15 108 -13 7 7 341 -80 358 -93 8 -7 79 -34 95 -36 28 -4
    293 -151 298 -166 2 -5 8 -9 13 -9 9 0 75 -51 177 -138 44 -38 120 -123 218
    -245 73 -91 215 -390 230 -484 3 -21 8 -42 11 -46 20 -33 46 -190 58 -355 12
@@ -27,11 +32,13 @@ export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
    -40 57 -103 155 -5 9 -15 20 -21 26 -6 5 -40 48 -76 95 -127 165 -291 325
    -473 459 -38 29 -83 62 -98 74 -16 12 -40 29 -55 37 -15 8 -67 39 -115 69 -99
    59 -339 177 -443 216 -245 93 -524 167 -774 205 -335 51 -306 50 -1877 50
-    l-1473 0 0 -760z"/>
-                <path d="M1730 5175 l0 -1095 1580 0 1580 0 0 1095 0 1095 -1580 0 -1580 0 0
-        -1095z"/>
+    l-1473 0 0 -760z"
+                />
+                <path
+                    d="M1730 5175 l0 -1095 1580 0 1580 0 0 1095 0 1095 -1580 0 -1580 0 0
+        -1095z"
+                />
            </g>
        </svg>
-
-    )
-}
+    );
+}
--- a/src/components/Navbar/Navbar.module.css
+++ b/src/components/Navbar/Navbar.module.css
@@ -6,11 +6,15 @@
    align-items: center;
    @mixin dark {
        background-color: var(--mantine-color-body);
-        box-shadow: 0 2px 4px var(--mantine-color-dark-7), 0 4px 24px var(--mantine-color-dark-7);
+        box-shadow:
+            0 2px 4px var(--mantine-color-dark-7),
+            0 4px 24px var(--mantine-color-dark-7);
    }
    @mixin light {
        background-color: #f9f9f9;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 24px rgba(0, 0, 0, .08);
+        box-shadow:
+            0 2px 4px rgba(0, 0, 0, 0.08),
+            0 4px 24px rgba(0, 0, 0, 0.08);
    }
    border-radius: rem(20);
    width: 100%;
@@ -32,7 +36,10 @@
    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));

    &:hover {
-        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+        background-color: light-dark(
+            var(--mantine-color-gray-0),
+            var(--mantine-color-dark-5)
+        );
    }

    &[data-active] {
@@ -43,4 +50,3 @@
        }
    }
 }
-
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,20 +1,31 @@
-import {Center, Flex, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme} from '@mantine/core';
+import {
+    Center,
+    Flex,
+    Image,
+    rem,
+    Stack,
+    Tooltip,
+    UnstyledButton,
+    useMantineColorScheme,
+} from "@mantine/core";
 import {
    IconBarcode,
-    IconBox, IconBuildingWarehouse,
+    IconBox,
+    IconBuildingWarehouse,
    IconCash,
    IconDashboard,
    IconFileBarcode,
    IconHome2,
    IconLogout,
    IconMan,
-    IconMoon, IconShoppingCart,
+    IconMoon,
+    IconShoppingCart,
    IconSun,
-} from '@tabler/icons-react';
-import classes from './Navbar.module.css';
-import {useAppDispatch} from "../../redux/store.ts";
-import {logout} from "../../features/authSlice.ts";
-import {useNavigate, useRouterState} from "@tanstack/react-router";
+} from "@tabler/icons-react";
+import classes from "./Navbar.module.css";
+import { useAppDispatch } from "../../redux/store.ts";
+import { logout } from "../../features/authSlice.ts";
+import { useNavigate, useRouterState } from "@tanstack/react-router";

 interface NavbarLinkProps {
    icon: typeof IconHome2;
@@ -28,24 +39,31 @@ interface NavbarLinkProps {
 }

 function NavbarLink(props: NavbarLinkProps) {
-    const {icon: Icon, label, active, onClick} = props;
+    const { icon: Icon, label, active, onClick } = props;
    return (
-        <Tooltip display={!label ? "none" : "flex"} label={label} position="right" transitionProps={{duration: 0}}>
-            <UnstyledButton onClick={() => onClick && onClick(props)}
-                            className={classes.link}
-                            data-active={active || undefined}>
-                <Icon style={{width: rem(20), height: rem(20)}} stroke={1.5}/>
+        <Tooltip
+            display={!label ? "none" : "flex"}
+            label={label}
+            position="right"
+            transitionProps={{ duration: 0 }}>
+            <UnstyledButton
+                onClick={() => onClick && onClick(props)}
+                className={classes.link}
+                data-active={active || undefined}>
+                <Icon
+                    style={{ width: rem(20), height: rem(20) }}
+                    stroke={1.5}
+                />
            </UnstyledButton>
        </Tooltip>
    );
 }

 const mockdata = [
-
    {
        icon: IconCash,
-        label: 'Сделки',
-        href: '/leads'
+        label: "Сделки",
+        href: "/leads",
    },
    // {
    //     icon: IconTable,
@@ -54,48 +72,50 @@ const mockdata = [
    // },
    {
        icon: IconMan,
-        label: 'Клиенты',
-        href: '/clients'
+        label: "Клиенты",
+        href: "/clients",
    },
    {
        icon: IconBox,
-        label: 'Услуги',
-        href: '/services'
+        label: "Услуги",
+        href: "/services",
    },
    {
        icon: IconBarcode,
-        label: 'Товары',
-        href: '/products'
+        label: "Товары",
+        href: "/products",
    },
    {
        icon: IconFileBarcode,
-        label: 'Штрихкоды',
-        href: '/barcode'
+        label: "Штрихкоды",
+        href: "/barcode",
    },
    {
        icon: IconBuildingWarehouse,
-        label: 'Склады отгрузки',
-        href: '/shipping_warehouses'
+        label: "Склады отгрузки",
+        href: "/shipping_warehouses",
    },
    {
-        icon:IconShoppingCart,
-        label: 'Маркетплейсы',
-        href: '/marketplaces'
-    }
+        icon: IconShoppingCart,
+        label: "Маркетплейсы",
+        href: "/marketplaces",
+    },
 ];

 export function Navbar() {
    const dispatch = useAppDispatch();
    const navigate = useNavigate();
    const router = useRouterState();
-    const {colorScheme, toggleColorScheme} = useMantineColorScheme({keepTransitions: true});
+    const { colorScheme, toggleColorScheme } = useMantineColorScheme({
+        keepTransitions: true,
+    });
    const onLogoutClick = () => {
        dispatch(logout());
-        navigate({to: '/login'});
-    }
+        navigate({ to: "/login" });
+    };
    const onNavlinkClick = (props: NavbarLinkProps) => {
-        navigate({to: props.href});
-    }
+        navigate({ to: props.href });
+    };
    const links = mockdata.map((link, index) => (
        <NavbarLink
            {...link}
@@ -108,35 +128,62 @@ export function Navbar() {

    return (
        <nav className={classes.navbar}>
-            <Flex direction={"column"} gap={rem(30)}>
-                <Center
-                    p={rem(5)}
-                >
+            <Flex
+                direction={"column"}
+                gap={rem(30)}>
+                <Center p={rem(5)}>
                    <Image
                        flex={1}
                        // style={{filter: "drop-shadow(0 0 30px #fff)"}}
-                        src={colorScheme == "dark" ? "/icons/logo-light.png" : "/icons/logo.png"}
+                        src={
+                            colorScheme == "dark"
+                                ? "/icons/logo-light.png"
+                                : "/icons/logo.png"
+                        }
                    />
                </Center>

                <div className={classes.navbarMain}>
-                    <Stack justify="center" gap={rem(10)}>
+                    <Stack
+                        justify="center"
+                        gap={rem(10)}>
                        {links}
                    </Stack>
                </div>
            </Flex>

-            <Stack w={"100%"} justify="center" gap={0}>
-                <NavbarLink icon={IconDashboard}
-                            href={"/admin"}
-                            index={-1}
-                            label={"Панель администратора"}
-                            onClick={() => onNavlinkClick({href: "/admin", index: -1, icon: IconDashboard})}
+            <Stack
+                w={"100%"}
+                justify="center"
+                gap={0}>
+                <NavbarLink
+                    icon={IconDashboard}
+                    href={"/admin"}
+                    index={-1}
+                    label={"Панель администратора"}
+                    onClick={() =>
+                        onNavlinkClick({
+                            href: "/admin",
+                            index: -1,
+                            icon: IconDashboard,
+                        })
+                    }
+                />
+                <NavbarLink
+                    label={"Сменить тему"}
+                    onClick={toggleColorScheme}
+                    icon={colorScheme == "dark" ? IconSun : IconMoon}
+                    href={"#"}
+                    index={-1}
+                />
+                <NavbarLink
+                    index={-1}
+                    href={"#"}
+                    onClick={onLogoutClick}
+                    icon={IconLogout}
+                    label="Выйти"
                />
-                <NavbarLink label={"Сменить тему"} onClick={toggleColorScheme}
-                            icon={colorScheme == "dark" ? IconSun : IconMoon} href={"#"} index={-1}/>
-                <NavbarLink index={-1} href={"#"} onClick={onLogoutClick} icon={IconLogout} label="Выйти"/>
            </Stack>
        </nav>
    );
-}
+}
--- a/src/components/Navbar/UserButton/UserButton.module.css
+++ b/src/components/Navbar/UserButton/UserButton.module.css
@@ -1,10 +1,13 @@
 .user {
-  display: block;
-  width: 100%;
-  padding: var(--mantine-spacing-md);
-  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+    display: block;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));

-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
-  }
-}
+    @mixin hover {
+        background-color: light-dark(
+            var(--mantine-color-gray-0),
+            var(--mantine-color-dark-8)
+        );
+    }
+}
--- a/src/components/Navbar/UserButton/UserButton.tsx
+++ b/src/components/Navbar/UserButton/UserButton.tsx
@@ -1,6 +1,6 @@
-import { UnstyledButton, Group, Avatar, Text, rem } from '@mantine/core';
-import { IconChevronRight } from '@tabler/icons-react';
-import classes from './UserButton.module.css';
+import { UnstyledButton, Group, Avatar, Text, rem } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import classes from "./UserButton.module.css";

 export function UserButton() {
    return (
@@ -12,17 +12,24 @@ export function UserButton() {
                />

                <div style={{ flex: 1 }}>
-                    <Text size="sm" fw={500}>
+                    <Text
+                        size="sm"
+                        fw={500}>
                        Harriette Spoonlicker
                    </Text>

-                    <Text c="dimmed" size="xs">
+                    <Text
+                        c="dimmed"
+                        size="xs">
                        hspoonlicker@outlook.com
                    </Text>
                </div>

-                <IconChevronRight style={{ width: rem(14), height: rem(14) }} stroke={1.5} />
+                <IconChevronRight
+                    style={{ width: rem(14), height: rem(14) }}
+                    stroke={1.5}
+                />
            </Group>
        </UnstyledButton>
    );
-}
+}
--- a/src/components/Navbar/data.ts
+++ b/src/components/Navbar/data.ts
@@ -1,25 +1,23 @@
-import {IconAdjustments, IconGauge} from "@tabler/icons-react";
+import { IconAdjustments, IconGauge } from "@tabler/icons-react";

 export const NavbarLinks = [
    {
-        label: 'Главная',
+        label: "Главная",
        icon: IconGauge,
        links: [
            {
                label: "123",
-                link: "/login"
+                link: "/login",
            },
-
        ],
    },
    {
-        label: 'Настройки',
+        label: "Настройки",
        icon: IconAdjustments,
-        links:[
+        links: [
            {
-                label: "Профиль"
-            }
-        ]
+                label: "Профиль",
+            },
+        ],
    },
-
 ];