feat: deal group and stuff

src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx

@@ -13,20 +13,27 @@ import {
     Popover,
     rem,
     Text,
+    ThemeIcon,
     Tooltip,
 } from "@mantine/core";
 import { useDealPageContext } from "../../../pages/LeadsPage/contexts/DealPageContext.tsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { DealStatus } from "../../../shared/enums/DealStatus.ts";
-import { IconCheck } from "@tabler/icons-react";
+import { IconCheck, IconLayoutGridRemove, IconTrash } from "@tabler/icons-react";
+import { useContextMenu } from "mantine-contextmenu";
+import useDealSummaryState from "./useDealSummaryState.tsx";
 
 type Props = {
     dealSummary: DealSummary;
+    color?: string
 };
 
-const DealSummaryCard: FC<Props> = ({ dealSummary }) => {
+const DealSummaryCard: FC<Props> = ({ dealSummary, color }) => {
+    const { showContextMenu } = useContextMenu();
     const { setSelectedDeal } = useDealPageContext();
+    const { onDelete, onComplete, onDeleteFromGroup } = useDealSummaryState();
+
     const onDealSummaryClick = () => {
         DealService.getDealById({ dealId: dealSummary.id }).then(deal => {
             setSelectedDeal(deal);
@@ -63,12 +70,36 @@ const DealSummaryCard: FC<Props> = ({ dealSummary }) => {
         <Indicator
             position={"top-end"}
             withBorder
+            size={15}
+            processing
             {...getIndicatorProps()}
         >
 
             <div
+                onContextMenu={showContextMenu([
+                    ...dealSummary.group ? [{
+                        key: "removeFromGroup",
+                        onClick: () => onDeleteFromGroup(dealSummary),
+                        title: "Убрать из группы",
+                        icon: <IconLayoutGridRemove />,
+                    }] : [],
+                    {
+                        key: "complete",
+                        onClick: () => onComplete(dealSummary),
+                        title: "Завершить",
+                        icon: <IconCheck />,
+                    },
+                    {
+                        key: "delete",
+                        onClick: () => onDelete(dealSummary),
+                        title: "Удалить",
+                        icon: <IconTrash />,
+                    },
+                ])}
                 onClick={() => onDealSummaryClick()}
-                className={styles["container"]}>
+                className={styles["container"]}
+                style={{ backgroundColor: color }}
+            >
                 <Flex direction={"column"} flex={1} gap={rem(3)}>
                     <Flex justify={"space-between"}>
 
@@ -81,7 +112,9 @@ const DealSummaryCard: FC<Props> = ({ dealSummary }) => {
                         </Text>
                     </Flex>
 
-                    <Text c={"blue.5"} size={"sm"}>
+                    <Text
+                        c={"blue.5"}
+                        size={"sm"}>
                         {dealSummary.name}
                     </Text>
                     <Flex
@@ -109,14 +142,14 @@ const DealSummaryCard: FC<Props> = ({ dealSummary }) => {
                     <Flex direction={"column"}>
                         {dealSummary.deliveryDate && (
                             <Text
-                                c={"gray.6"}
+                                c={"blue.5"}
                                 size={"sm"}>
                                 Доставка: {(new Date(dealSummary.deliveryDate)).toLocaleDateString("ru-RU")}
                             </Text>
                         )}
                         {dealSummary.receivingSlotDate && (
                             <Text
-                                c={"gray.6"}
+                                c={"blue.5"}
                                 size={"sm"}>
                                 Слот: {(new Date(dealSummary.receivingSlotDate)).toLocaleDateString("ru-RU")}
                             </Text>
@@ -163,8 +196,11 @@ const DealSummaryCard: FC<Props> = ({ dealSummary }) => {
                             </CopyButton>
                             {dealSummary.billRequest?.paid && (
                                 <Tooltip label={"Оплачен"}>
+                                    <ThemeIcon variant={"transparent"}>
+                                        <IconCheck />
+                                    </ThemeIcon>
+
 
-                                    <IconCheck />
                                 </Tooltip>
 
                             )}