feat: styles for deal drawer

src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css

@@ -1,6 +0,0 @@
-.container {
-    width: min-content;
-    cursor: pointer;
-    padding: 6px;
-    height: 100%;
-}

src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx

@@ -1,26 +0,0 @@
-import { FC, PropsWithChildren } from "react";
-import { ActionIcon, Box } from "@mantine/core";
-import style from "./ToolPanelAction.module.css";
-
-type Props = {
-    onClick: () => void;
-};
-
-const ToolPanelAction: FC<PropsWithChildren<Props>> = ({
-    onClick,
-    children,
-}) => {
-    return (
-        <Box>
-            <ActionIcon
-                variant={"default"}
-                onClick={onClick}
-                radius="lg"
-                className={style.container}>
-                {children}
-            </ActionIcon>
-        </Box>
-    );
-};
-
-export default ToolPanelAction;

src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx

@@ -4,12 +4,12 @@ import { FC } from "react";
 import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
 import { Flex, Group, Indicator } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import ToolPanelAction from "@/app/deals/components/desktop/ToolPanelAction/ToolPanelAction";
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
@@ -89,16 +89,16 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
                     disabled={!isChangedFilters}
                     offset={3}
                     size={8}>
-                    <ToolPanelAction onClick={onFiltersClick}>
+                    <ActionIconWithTip onClick={onFiltersClick}>
                         <IconFilter />
-                    </ToolPanelAction>
+                    </ActionIconWithTip>
                 </Indicator>
-                <ToolPanelAction onClick={onEditClick}>
+                <ActionIconWithTip onClick={onEditClick}>
                     <IconEdit />
-                </ToolPanelAction>
+                </ActionIconWithTip>
-                <ToolPanelAction onClick={onCreateClick}>
+                <ActionIconWithTip onClick={onCreateClick}>
                     <IconPlus />
-                </ToolPanelAction>
+                </ActionIconWithTip>
                 <ProjectSelect
                     data={projects}
                     value={selectedProject}

src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css

@@ -1,7 +1,9 @@
 
 .tab {
+    @media (max-width: 48em) {
         border-bottom-width: 3px;
     }
+}
 
 .header-board {
     @mixin light {

src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx

@@ -25,7 +25,7 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
 
     return (
         <Drawer
-            size={isMobile ? "100%" : "60%"}
+            size={isMobile ? "100%" : "80%"}
             position={"right"}
             onClose={onClose}
             removeScrollProps={{ allowPinchZoom: true }}
@@ -37,7 +37,8 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
                 body: {
                     display: "flex",
                     flexDirection: "column",
-                    padding: 0,
+                    padding: isMobile ? 0 : "var(--mantine-spacing-xs)",
+                    height: "100vh",
                 },
                 header: {
                     paddingBlock: 0,

src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx

@@ -3,6 +3,7 @@ import { IconEdit } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { Box, Tabs } from "@mantine/core";
 import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
+import useIsMobile from "@/hooks/utils/useIsMobile";
 import { DealSchema, ProjectSchema } from "@/lib/client";
 import { MODULES } from "@/modules/modules";
 import styles from "../DealEditorDrawer.module.css";
@@ -15,6 +16,8 @@ type Props = {
 };
 
 const DealEditorBody: FC<Props> = props => {
+    const isMobile = useIsMobile();
+
     const getTabPanel = (value: string, component: ReactNode): ReactNode => (
         <Tabs.Panel
             key={value}
@@ -53,6 +56,8 @@ const DealEditorBody: FC<Props> = props => {
     return (
         <Tabs
             defaultValue="general"
+            orientation={isMobile ? "horizontal" : "vertical"}
+            h={"100%"}
             classNames={{ tab: styles.tab }}>
             <Tabs.List>
                 <Tabs.Tab

src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Stack, Text, TextInput } from "@mantine/core";
+import { Flex, Stack, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/components/Footer";
 import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
@@ -40,13 +40,26 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
     return (
         <form onSubmit={form.onSubmit(onSubmit)}>
             <Stack p={"md"}>
+                <Flex
+                    gap={"md"}
+                    w={"100%"}
+                    direction={{ base: "column", sm: "row" }}>
                     <TextInput
                         label={"Название"}
                         {...form.getInputProps("name")}
+                        flex={1}
                     />
-                <Text>
+                    <TextInput
-                    Создано: {utcDateTimeToLocalString(value.createdAt)}
+                        label={"Дата создания"}
-                </Text>
+                        value={utcDateTimeToLocalString(value.createdAt)}
+                        readOnly
+                        flex={1}
+                    />
+                </Flex>
+                <Flex
+                    gap={"md"}
+                    w={"100%"}
+                    direction={{ base: "column", sm: "row" }}>
                     <BoardSelect
                         label={"Доска"}
                         {...form.getInputProps("board")}
@@ -55,12 +68,15 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
                             form.setFieldValue("status", undefined);
                         }}
                         projectId={value.board.projectId}
+                        flex={1}
                     />
                     <StatusSelect
                         label={"Статус"}
                         {...form.getInputProps("status")}
                         boardId={form.values.board?.id}
+                        flex={1}
                     />
+                </Flex>
                 <Footer
                     form={form}
                     onDelete={() => onDelete(value)}

src/components/ui/ActionIconWithTip/ActionIconWithTip.module.css

@@ -0,0 +1,5 @@
+.container {
+    cursor: pointer;
+    min-height: calc(var(--mantine-spacing-md) + var(--mantine-spacing-lg));
+    min-width: calc(var(--mantine-spacing-md) + var(--mantine-spacing-lg));
+}

src/components/ui/ActionIconWithTip/ActionIconWithTip.tsx

@@ -0,0 +1,34 @@
+import { FC, PropsWithChildren } from "react";
+import {
+    ActionIcon,
+    ActionIconProps,
+    PolymorphicComponentProps,
+    Tooltip,
+} from "@mantine/core";
+import style from "./ActionIconWithTip.module.css";
+
+type Props = PolymorphicComponentProps<"button", ActionIconProps> & {
+    tipLabel?: string;
+};
+
+const ActionIconWithTip: FC<PropsWithChildren<Props>> = ({
+    children,
+    tipLabel,
+    ...props
+}) => (
+    <Tooltip
+        label={tipLabel}
+        hidden={!tipLabel}
+        h={"max-content"}
+        w={"max-content"}>
+        <ActionIcon
+            variant={"default"}
+            radius={"lg"}
+            className={style.container}
+            {...props}>
+            {children}
+        </ActionIcon>
+    </Tooltip>
+);
+
+export default ActionIconWithTip;

src/components/ui/BaseTable/BaseTable.module.css

@@ -0,0 +1,11 @@
+
+.table-border {
+    border-width: 1px;
+    border-radius: var(--mantine-radius-lg);
+    @mixin light {
+        border-color: var(--mantine-color-gray-4);
+    }
+    @mixin dark {
+        border-color: var(--mantine-color-dark-4);
+    }
+}

src/components/ui/BaseTable/BaseTable.tsx

@@ -1,14 +1,18 @@
 import React from "react";
+import classNames from "classnames";
 import { DataTable, DataTableProps } from "mantine-datatable";
+import styles from "./BaseTable.module.css";
 
 function BaseTable<T>(props: DataTableProps<T>) {
     return (
         <DataTable
-            withTableBorder
             withRowBorders
             striped={false}
             verticalAlign={"center"}
             backgroundColor={"transparent"}
+            className={classNames(
+                props.withTableBorder && styles["table-border"]
+            )}
             {...props}
         />
     );

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServiceRow.tsx

@@ -1,16 +1,9 @@
 import { FC } from "react";
 import { IconTrash } from "@tabler/icons-react";
 import { isNumber } from "lodash";
-import {
+import { Divider, Group, NumberInput, Stack, Text } from "@mantine/core";
-    ActionIcon,
-    Divider,
-    Group,
-    NumberInput,
-    Stack,
-    Text,
-    Tooltip,
-} from "@mantine/core";
 import { useDebouncedCallback } from "@mantine/hooks";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import { DealServiceSchema } from "@/lib/client";
 import LockCheckbox from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/LockCheckbox/LockCheckbox";
 
@@ -51,17 +44,13 @@ const DealServiceRow: FC<Props> = ({ value, onChange, onDelete }) => {
             <Divider />
             <Text>{value.service.name}</Text>
             <Group>
-                <Tooltip
+                <ActionIconWithTip
                     onClick={() => onDelete(value)}
-                    label="Удалить услугу">
+                    tipLabel={"Удалить услугу"}>
-                    <ActionIcon variant={"default"}>
                     <IconTrash />
-                    </ActionIcon>
+                </ActionIconWithTip>
-                </Tooltip>
                 {/*<Tooltip label="Сотрудники">*/}
-                {/*    <ActionIcon*/}
+                {/*<ActionIcon onClick={() => onEmployeeClick(service)}>*/}
-                {/*        onClick={() => onEmployeeClick(service)}*/}
-                {/*        variant={"default"}>*/}
                 {/*    <IconUsersGroup />*/}
                 {/*</ActionIcon>*/}
                 {/*</Tooltip>*/}

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx

@@ -13,6 +13,7 @@ const FulfillmentBaseTabBody = () => {
             gap={"xs"}>
             <ScrollArea
                 offsetScrollbars={"y"}
+                flex={4}
                 mah={"91vh"}>
                 <Stack>
                     {dealProductsList.dealProducts.map((dealProduct, index) => (
@@ -23,7 +24,7 @@ const FulfillmentBaseTabBody = () => {
                     ))}
                 </Stack>
             </ScrollArea>
-            <Stack>
+            <Stack flex={2}>
                 <DealServicesTable />
                 <ProductsActions />
             </Stack>

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/LockCheckbox/LockCheckbox.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { IconLock, IconLockOpen } from "@tabler/icons-react";
-import { ActionIcon, CheckboxProps, Tooltip } from "@mantine/core";
+import { CheckboxProps } from "@mantine/core";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 
 type RestProps = {
     value: boolean;
@@ -15,13 +16,11 @@ const LockCheckbox: FC<Props> = props => {
     const handleChange = () => props.onChange(!props.value);
 
     return (
-        <Tooltip label={props.label}>
+        <ActionIconWithTip
-            <ActionIcon
             onClick={handleChange}
             variant={props.variant}>
             {getIcon()}
-            </ActionIcon>
+        </ActionIconWithTip>
-        </Tooltip>
     );
 };
 

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css

@@ -1,11 +1,6 @@
 .container {
-    display: flex;
+    border: dashed 1px var(--mantine-color-default-border);
-    border: dashed var(--item-border-size) var(--mantine-color-default-border);
+    border-radius: var(--mantine-radius-lg);
-    border-radius: var(--item-border-radius);
-    gap: rem(20);
-    padding: rem(10);
-    margin-bottom: rem(10);
-    flex: 1;
 }
 
 .image-container {
@@ -14,23 +9,3 @@
     max-width: rem(250);
     height: 100%;
 }
-
-.services-container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: rem(10);
-    flex: 1;
-}
-
-.data-container {
-    max-width: rem(250);
-    display: flex;
-    flex-direction: column;
-    gap: rem(10);
-    flex: 1;
-}
-
-.attributes-container {
-    overflow-wrap: break-word;
-}

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx

@@ -1,8 +1,7 @@
 import { FC } from "react";
 import { isNumber } from "lodash";
 import {
-    Box,
+    Flex,
-    Card,
     Image,
     NumberInput,
     rem,
@@ -23,6 +22,7 @@ import ProductViewActions from "@/modules/dealModules/dealEditorTabs/Fulfillment
 import { useFulfillmentBaseContext } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/contexts/FulfillmentBaseContext";
 import { ServiceType } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/types/service";
 import ProductServicesTable from "./components/ProductServicesTable";
+import styles from "./ProductView.module.css";
 
 type Props = {
     dealProduct: DealProductSchema;
@@ -99,23 +99,29 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
     };
 
     return (
-        <Card
+        <Flex
+            align={"start"}
+            direction={"row"}
             p={"sm"}
-            style={{ display: "flex", flexDirection: "row" }}>
+            className={styles.container}
-            <Stack gap={"sm"}>
+            gap={"sm"}>
+            <Stack
+                flex={2}
+                gap={"sm"}>
+                {!dealProduct.product && (
                     <Image
                         flex={1}
                         radius={rem(10)}
                         fit={"cover"}
                         // src={dealProduct.product.imageUrl}
                     />
+                )}
                 <Title order={3}>{dealProduct.product.name}</Title>
                 <ProductFieldsList product={dealProduct.product} />
                 {/*<Text>*/}
                 {/*    Штрихкоды:*/}
                 {/*{value.product.barcodes.join(", ")}*/}
                 {/*</Text>*/}
-                <Box />
                 <NumberInput
                     mt={rem(10)}
                     suffix={" шт."}
@@ -126,22 +132,17 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
                     placeholder={"Введите количество товара"}
                 />
                 <Textarea
-                    mih={rem(140)}
-                    styles={{
-                        wrapper: { height: "90%" },
-                        input: { height: "90%" },
-                    }}
-                    my={rem(10)}
                     defaultValue={dealProduct.comment}
                     onChange={event =>
                         debouncedOnChange({
                             comment: event.currentTarget.value,
                         })
                     }
+                    rows={4}
                     placeholder={"Комментарий"}
                 />
             </Stack>
-            <Stack>
+            <Stack flex={5}>
                 <ProductServicesTable
                     dealProduct={dealProduct}
                     onDuplicateServices={() => onDuplicateServices(dealProduct)}
@@ -149,7 +150,7 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
                 />
                 <ProductViewActions dealProduct={dealProduct} />
             </Stack>
-        </Card>
+        </Flex>
     );
 };
 

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductServicesTable.tsx

@@ -1,7 +1,8 @@
 import { FC } from "react";
-import { IconMoodSad } from "@tabler/icons-react";
+import { IconCopy, IconMoodSad } from "@tabler/icons-react";
 import { Button, Flex, Group, Stack, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import BaseTable from "@/components/ui/BaseTable/BaseTable";
 import { DealProductSchema, ProductServiceSchema } from "@/lib/client";
 import useProductServicesTableColumns from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/hooks/useProductServicesTableColumns";
@@ -113,6 +114,7 @@ const ProductServicesTable: FC<Props> = ({
                 columns={columns}
                 groups={undefined}
                 idAccessor={"serviceId"}
+                withTableBorder
                 style={{
                     height: isEmptyTable ? "8rem" : "auto",
                 }}
@@ -128,17 +130,21 @@ const ProductServicesTable: FC<Props> = ({
             <Flex
                 justify={"flex-end"}
                 gap={"xs"}
-                pt={isEmptyTable ? 0 : "xs"}>
+                pt={"xs"}>
+                {onDuplicateServices && (
+                    <ActionIconWithTip
+                        tipLabel={"Продублировать услуги"}
+                        onClick={onDuplicateServices}>
+                        <IconCopy />
+                    </ActionIconWithTip>
+                )}
+                {onKitAdd && (
                     <Button
-                    onClick={() => onKitAdd && onKitAdd()}
+                        onClick={onKitAdd}
                         variant={"default"}>
                         Добавить набор услуг
                     </Button>
-                <Button
+                )}
-                    onClick={() => onDuplicateServices && onDuplicateServices()}
-                    variant={"default"}>
-                    Продублировать услуги
-                </Button>
                 <Button
                     onClick={onCreateClick}
                     variant={"default"}>

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductViewActions.tsx

@@ -1,7 +1,8 @@
 import { FC } from "react";
 import { IconEdit, IconTrash } from "@tabler/icons-react";
-import { ActionIcon, Flex, rem, Tooltip } from "@mantine/core";
+import { Flex } from "@mantine/core";
 import { modals } from "@mantine/modals";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import { DealProductSchema } from "@/lib/client";
 import { useFulfillmentBaseContext } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/contexts/FulfillmentBaseContext";
 
@@ -35,7 +36,7 @@ const ProductViewActions: FC<Props> = ({ dealProduct }) => {
         <Flex
             mt={"auto"}
             ml={"auto"}
-            gap={rem(10)}>
+            gap={"sm"}>
             {/*<Tooltip*/}
             {/*    onClick={onPrintBarcodeClick}*/}
             {/*    label="Печать штрихкода">*/}
@@ -43,20 +44,16 @@ const ProductViewActions: FC<Props> = ({ dealProduct }) => {
             {/*        <IconBarcode />*/}
             {/*    </ActionIcon>*/}
             {/*</Tooltip>*/}
-            <Tooltip
+            <ActionIconWithTip
                 onClick={onProductEditClick}
-                label="Редактировать товар">
+                tipLabel="Редактировать товар">
-                <ActionIcon variant={"default"}>
                 <IconEdit />
-                </ActionIcon>
+            </ActionIconWithTip>
-            </Tooltip>
+            <ActionIconWithTip
-            <Tooltip
                 onClick={() => dealProductsCrud.onDelete(dealProduct)}
-                label="Удалить товар">
+                tipLabel="Удалить товар">
-                <ActionIcon variant={"default"}>
                 <IconTrash />
-                </ActionIcon>
+            </ActionIconWithTip>
-            </Tooltip>
         </Flex>
     );
 };

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/hooks/useProductServicesTableColumns.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from "react";
 import { IconEdit, IconTrash } from "@tabler/icons-react";
 import { DataTableColumn } from "mantine-datatable";
-import { ActionIcon, Box, Flex, Text, Tooltip } from "@mantine/core";
+import { Box, Flex, Text } from "@mantine/core";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import { ProductServiceSchema } from "@/lib/client";
 
 type Props = {
@@ -31,21 +32,20 @@ const useProductServicesTableColumns = ({
                     textAlign: "center",
                     width: "0%",
                     render: dealProductService => (
-                        <Flex gap="md">
+                        <Flex
-                            <Tooltip label="Удалить">
+                            gap="md"
-                                <ActionIcon
+                            px={"sm"}
-                                    onClick={() => onDelete(dealProductService)}
+                            my={"sm"}>
-                                    variant={"default"}>
+                            <ActionIconWithTip
+                                tipLabel={"Удалить услугу"}
+                                onClick={() => onDelete(dealProductService)}>
                                 <IconTrash />
-                                </ActionIcon>
+                            </ActionIconWithTip>
-                            </Tooltip>
+                            <ActionIconWithTip
-                            <Tooltip label="Редактировать">
+                                tipLabel="Редактировать"
-                                <ActionIcon
+                                onClick={() => onChange(dealProductService)}>
-                                    onClick={() => onChange(dealProductService)}
-                                    variant={"default"}>
                                 <IconEdit />
-                                </ActionIcon>
+                            </ActionIconWithTip>
-                            </Tooltip>
                             {/*<Tooltip label="Сотрудники">*/}
                             {/*    <ActionIcon*/}
                             {/*        onClick={() =>*/}
@@ -66,7 +66,7 @@ const useProductServicesTableColumns = ({
                     accessor: "price",
                     title: "Цена",
                     footer: data.length > 0 && (
-                        <Box h={"100%"}>
+                        <Box my={"sm"}>
                             <Text fw={700}>
                                 Итог: {totalPrice.toLocaleString("ru")}₽
                             </Text>

src/theme.ts

@@ -14,7 +14,7 @@ export const myColor: MantineColorsTuple = [
     "#00718c",
 ];
 
-const radius = "md";
+const radius = "lg";
 
 const font = Roboto({
     subsets: ["latin"],