feat: deal card, deal status, deal new dates, indicator, hide navbar

src/pages/LeadsPage/drawers/DealEditDrawer/tabs/DealEditDrawerGeneralTab.tsx

@@ -25,10 +25,11 @@ import { ButtonCopyControlled } from "../../../../../components/ButtonCopyContro
 import { useClipboard } from "@mantine/hooks";
 import ButtonCopy from "../../../../../components/ButtonCopy/ButtonCopy.tsx";
 import FileSaver from "file-saver";
-import { getCurrentDateTimeForFilename } from "../../../../../shared/lib/date.ts";
+import { dateWithoutTimezone, getCurrentDateTimeForFilename } from "../../../../../shared/lib/date.ts";
 import { IconBarcode, IconPrinter } from "@tabler/icons-react";
 import styles from "../../../ui/LeadsPage.module.css";
 import { base64ToBlob } from "../../../../../shared/lib/utils.ts";
+import { DatePickerInput } from "@mantine/dates";
 
 type Props = {
     deal: DealSchema;
@@ -41,7 +42,17 @@ const Content: FC<Props> = ({ deal }) => {
     const clipboard = useClipboard();
     const queryClient = useQueryClient();
 
-    const initialValues: FormType = deal;
+    // ignore typescript
+
+    const initialValues: FormType = {
+        ...deal,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        deliveryDate: deal.deliveryDate ? new Date(deal.deliveryDate) : null,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        receivingSlotDate: deal.receivingSlotDate ? new Date(deal.receivingSlotDate) : null,
+    };
     const form = useForm<FormType>({
         initialValues: initialValues,
         validate: {
@@ -85,7 +96,14 @@ const Content: FC<Props> = ({ deal }) => {
             await updateClientInfo(values);
         }
         // updating deal info
-        await updateDealInfo(values);
+        // get shimpent warehouse name from object if its object, otherwise just pass it
+        const shippingWarehouse = isShippingWarehouse(values.shippingWarehouse) ? values.shippingWarehouse.name : values.shippingWarehouse;
+        await updateDealInfo({
+            ...values,
+            deliveryDate: values.deliveryDate ? dateWithoutTimezone(new Date(values.deliveryDate)) : null,
+            receivingSlotDate: values.receivingSlotDate ? dateWithoutTimezone(new Date(values.receivingSlotDate)) : null,
+            shippingWarehouse: shippingWarehouse,
+        });
     };
     const isShippingWarehouse = (
         value: ShippingWarehouseSchema | string | null | undefined,
@@ -171,6 +189,21 @@ const Content: FC<Props> = ({ deal }) => {
                                 ).onChange(event);
                             }}
                         />
+                        <DatePickerInput
+                            minDate={new Date()}
+                            placeholder={"Укажите дату передачи в доставку"}
+                            label={"Дата передачи в доставку"}
+                            {...form.getInputProps("deliveryDate")}
+
+                        />
+                        <DatePickerInput
+                            minDate={new Date()}
+
+                            placeholder={"Укажите слот приемки"}
+                            label={"Слот приемки"}
+                            {...form.getInputProps("receivingSlotDate")}
+
+                        />
                     </Flex>
                 </Fieldset>
                 <Flex

src/pages/LeadsPage/ui/LeadsPage.tsx

@@ -8,7 +8,7 @@ import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
 import DealEditDrawer from "../drawers/DealEditDrawer/DealEditDrawer.tsx";
 import { DealPageContextProvider } from "../contexts/DealPageContext.tsx";
 import { modals } from "@mantine/modals";
-import { DealService, DealSummary, DealSummaryReorderRequest } from "../../../client";
+import { DealService, DealSummaryReorderRequest } from "../../../client";
 import { ActionIcon, Flex, NumberInput, rem, Text } from "@mantine/core";
 import classNames from "classnames";
 import { notifications } from "../../../shared/lib/notifications.ts";
@@ -19,6 +19,7 @@ import BaseMarketplaceSelect from "../../../components/Selects/BaseMarketplaceSe
 import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
 import DealsTable from "../../DealsPage/components/DealsTable/DealsTable.tsx";
 import { motion } from "framer-motion";
+import { dateWithoutTimezone } from "../../../shared/lib/date.ts";
 
 enum DisplayMode {
     BOARD,
@@ -31,11 +32,11 @@ export const LeadsPage: FC = () => {
     const { summariesRaw, refetch } = useDealSummaries();
     const [summaries, setSummaries] = useState(summariesRaw);
     const [displayMode, setDisplayMode] = useState<DisplayMode>(
-        DisplayMode.BOARD
+        DisplayMode.BOARD,
     );
     const [isDragEnded, setIsDragEnded] = useState(true);
 
-    const [selectedDeals, setSelectedDeals] = useState<DealSummary[]>([]);
+    // const [selectedDeals, setSelectedDeals] = useState<DealSummary[]>([]);
 
     useEffect(() => {
         setSummaries(summariesRaw);
@@ -129,19 +130,18 @@ export const LeadsPage: FC = () => {
             });
             return;
         }
-        modals.openContextModal({
-            modal: "enterDeadline",
-            title: "Необходимо указать дедлайн",
-            innerProps: {
-                onSubmit: event =>
-                    DealService.reorderDealSummaries({
-                        requestBody: event,
-                    }).then(async response => {
-                        setSummaries(response.summaries);
-                        await refetch();
-                    }),
-                request: request,
+
+        DealService.reorderDealSummaries({
+            requestBody: {
+                dealId: dealId,
+                status: status,
+                index: result.destination.index,
+                comment: "",
+                deadline: dateWithoutTimezone(new Date()),
             },
+        }).then(async response => {
+            setSummaries(response.summaries);
+            await refetch();
         });
     };
     const getTableBody = () => {
@@ -151,7 +151,9 @@ export const LeadsPage: FC = () => {
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ duration: 0.2 }}>
-                <DealsTable items={data} onSelectionChange={setSelectedDeals} />
+                <DealsTable items={data}
+                    // onSelectionChange={setSelectedDeals}
+                />
             </motion.div>
         );
     };
@@ -188,6 +190,15 @@ export const LeadsPage: FC = () => {
                                 droppableId={"AWAITING_ACCEPTANCE"}
                                 color={"#4A90E2"}
                             />
+                            <Board
+                                summaries={summaries.filter(
+                                    summary =>
+                                        summary.status == DealStatus.READY_FOR_WORK,
+                                )}
+                                title={"Готов к работе"}
+                                droppableId={"READY_FOR_WORK"}
+                                color={"#D3D3D3"}
+                            />
                             <Board
                                 summaries={summaries.filter(
                                     summary =>
@@ -207,6 +218,15 @@ export const LeadsPage: FC = () => {
                                 droppableId={"AWAITING_SHIPMENT"}
                                 color={"#7ED321"}
                             />
+                            <Board
+                                summaries={summaries.filter(
+                                    summary =>
+                                        summary.status == DealStatus.IN_DELIVERY,
+                                )}
+                                title={"В доставке"}
+                                droppableId={"IN_DELIVERY"}
+                                color={"#6A0DAD"}
+                            />
                             <Board
                                 summaries={summaries.filter(
                                     summary =>

src/pages/PageWrapper/PageWrapper.tsx

@@ -4,12 +4,14 @@ import { useSelector } from "react-redux";
 import { RootState } from "../../redux/store.ts";
 import styles from "./PageWrapper.module.css";
 import { Navbar } from "../../components/Navbar/Navbar.tsx";
+import HideNavbarAffix from "../../components/HideNavbarAffix/HideNavbarAffix.tsx";
 
 export type Props = {
     children: ReactNode;
 };
 const PageWrapper: FC<Props> = ({ children }) => {
     const authState = useSelector((state: RootState) => state.auth);
+    const uiState = useSelector((state: RootState) => state.ui);
     return (
         <AppShell
             layout={"alt"}
@@ -17,10 +19,12 @@ const PageWrapper: FC<Props> = ({ children }) => {
             navbar={
                 authState.isAuthorized && !authState.isGuest
                     ? {
-                          width: "130px",
-                          breakpoint: "sm",
-                      }
+                        width: "130px",
+                        breakpoint: "sm",
+                        collapsed: { desktop: uiState.hideNavbar },
+                    }
                     : undefined
+
             }>
             <AppShell.Navbar>
                 {authState.isAuthorized && !authState.isGuest && (
@@ -42,6 +46,7 @@ const PageWrapper: FC<Props> = ({ children }) => {
                 }
                 className={styles["main-container"]}>
                 <div className={styles["container"]}>{children}</div>
+                <HideNavbarAffix />
             </AppShell.Main>
         </AppShell>
     );