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>

src/components/Navbar/Navbar.tsx

@@ -30,11 +30,11 @@ function NavbarLink(props: NavbarLinkProps) {
 }
 
 const mockdata = [
-    {
-        icon: IconHome2,
-        label: 'Главная',
-        href: '/'
-    },
+    // {
+    //     icon: IconHome2,
+    //     label: 'Главная',
+    //     href: '/'
+    // },
     {
         icon: IconCash,
         label: 'Сделки',
@@ -83,7 +83,7 @@ export function Navbar() {
         <nav className={classes.navbar}>
             <Center>
                 <Image
-                    style={{filter: "drop-shadow(0 0 30px #fff)"}}
+                    // style={{filter: "drop-shadow(0 0 30px #fff)"}}
                     src={colorScheme == "dark" ? "/icons/logo-light.png" : "/icons/logo.png"}
                 />
             </Center>

src/components/PageBlock/PageBlock.module.css

@@ -1,9 +1,14 @@
 .container {
     border-radius: rem(20);
     background-color: var(--mantine-color-body);
-    padding: rem(10);
+    padding: rem(15);
 }
 
 .container-fluid {
     flex: 1;
+}
+
+.container-full-height {
+    height: calc(100vh - (rem(20) * 2));
+
 }

src/components/PageBlock/PageBlock.tsx

@@ -1,14 +1,17 @@
-import {FC, ReactNode} from "react";
+import {CSSProperties, FC, ReactNode} from "react";
 import styles from './PageBlock.module.css';
 import classNames from "classnames";
 
 type Props = {
     children: ReactNode
     fluid?: boolean;
+    style?: CSSProperties;
+    fullHeight?: boolean;
 }
-export const PageBlock: FC<Props> = ({children, fluid = true}) => {
+export const PageBlock: FC<Props> = ({children, style, fluid = true, fullHeight = false}) => {
     return (
-        <div className={classNames(styles['container'], fluid && styles['container-fluid'])}>
+        <div style={style}
+             className={classNames(styles['container'], fluid && styles['container-fluid'], fullHeight && styles['container-full-height'])}>
             {children}
         </div>
     )