v0.1

src/components/Dnd/Board/Board.tsx

@@ -6,23 +6,29 @@ import CreateDealButton from "../CreateDealButton/CreateDealButton.tsx";
 import {DealSummary} from "../../../client";
 import DealSummaryCard from "../DealSummaryCard/DealSummaryCard.tsx";
 import classNames from "classnames";
+import {getPluralForm} from "../../../shared/lib/utils.ts";
+import {sum} from "lodash";
 
 type Props = {
     droppableId: string;
     title: string;
     withCreateButton?: boolean;
     summaries: DealSummary[];
+    color: string;
 }
 
-export const Board: FC<Props> = ({droppableId, title, summaries, withCreateButton = false}) => {
-
+export const Board: FC<Props> = ({droppableId, title, summaries, color, withCreateButton = false}) => {
+    const getDealsText = () => {
+        const pluralForm = getPluralForm(summaries.length, 'сделка', 'сделки', 'сделок');
+        return `${summaries.length} ${pluralForm}: ${sum(summaries.map(summary => summary.totalPrice))}₽`;
+    }
 
     return (
         <div className={styles["container"]}>
             <div className={styles["header"]}>
                 <Title size={"h4"}>{title}</Title>
-                <Text>12 сделок: 500р</Text>
-                <Divider size={"xl"} my={10} color={"blue"}/>
+                <Text>{getDealsText()}</Text>
+                <Divider size={"xl"} my={10} color={color}/>
             </div>
             <Droppable
                 droppableId={droppableId}

src/components/Dnd/CreateDealButton/CreateDealButton.tsx

@@ -5,6 +5,7 @@ import {Text, Transition} from '@mantine/core';
 import CreateDealFrom from "../CreateDealForm/CreateDealFrom.tsx";
 import {DealService} from "../../../client";
 import {dateWithoutTimezone} from "../../../shared/lib/utils.ts";
+import {useQueryClient} from "@tanstack/react-query";
 
 type Props = {
     onClick: () => void;
@@ -12,6 +13,8 @@ type Props = {
 const CreateDealButton: FC<Props> = () => {
     const [isCreating, setIsCreating] = useState(false);
     const [isTransitionEnded, setIsTransitionEnded] = useState(true);
+    const queryClient = useQueryClient();
+
     return (
         <div className={styles['container']}
              onClick={() => {
@@ -41,6 +44,9 @@ const CreateDealButton: FC<Props> = () => {
                                         ...quickDeal,
                                         acceptanceDate: dateWithoutTimezone(quickDeal.acceptanceDate)
                                     }
+                                }).then(async () => {
+                                    await queryClient.invalidateQueries({queryKey: ['getDealSummaries']});
+                                    setIsCreating(false);
                                 })
                             }}
                         />

src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx

@@ -18,12 +18,26 @@ const DealSummaryCard: FC<Props> = ({dealSummary}) => {
                 setSelectedDeal(deal);
             })
     }
+    const getDeadlineTextColor = (deadline: string) => {
+        // generate three colors, yellow for 1 day, red for 0 days, green for more than 1 day
+        const deadlineDate = new Date(deadline);
+        const currentDate = new Date();
+        const diff = deadlineDate.getTime() - currentDate.getTime();
+        const diffDays = Math.ceil(diff / (1000 * 3600 * 24));
+        if (diffDays === 1) {
+            return 'yellow.8';
+        }
+        if (diffDays === 0) {
+            return 'red.8';
+        }
+        return 'green.8';
+    }
     return (
         <div onClick={() => onDealSummaryClick()} className={styles['container']}>
             <div className={styles['flex-row']}>
                 <div className={styles['flex-item']}>
                     <Text size={"sm"} c={"gray.6"}>
-                        {dealSummary.clientName}
+                        Клиент: {dealSummary.clientName}
                     </Text>
                 </div>
                 <div className={styles['flex-item']}>
@@ -38,12 +52,12 @@ const DealSummaryCard: FC<Props> = ({dealSummary}) => {
             <div className={classNames(styles['flex-row'], styles['flex-row-right'])}>
                 <div className={styles['flex-item']}>
                     <Text size={"sm"} c={"gray.6"}>
-                        {new Date(dealSummary.changedAt).toLocaleString('ru-RU')}
+                        {/*Создана: {new Date(dealSummary.changedAt).toLocaleString('ru-RU')}*/}
                     </Text>
                 </div>
                 <div className={styles['flex-item']}>
-                    <Text size={"sm"} c={"yellow.8"}>
-                        Нет задач
+                    <Text size={"sm"} c={getDeadlineTextColor(dealSummary.deadline)}>
+                        {new Date(dealSummary.deadline).toLocaleString('ru-RU').slice(0, -3)}
                     </Text>
                 </div>
             </div>