Production Info Comments fixes & Delivery Reverting

src/api/productionInfo/productionInfo.ts

@@ -33,7 +33,7 @@ export const createProductionInfo = async (
 
 export const updateProductionInfo = async (
   body: GoodProductionInfo,
-): Promise<GoodProductionInfo> => {
+): Promise<WithId<GoodProductionInfo>> => {
   const { data: productionInfo } = await axiosClient.put(
     "/storage/good/production_info/",
     body,

src/api/storage/storage.ts

@@ -12,6 +12,10 @@ export const moveGoodsToStorage = async (body: DeliveryToStorage[]) => {
   await axiosClient.post("/storage/move_goods_from_delivery/", body)
 }
 
+export const revertGoodsToDelivery = async (deliveryId: number) => {
+  await axiosClient.delete(`/storage/revert_goods_to_delivery/${deliveryId}`)
+}
+
 export const getStorageActualInfoByGoodId = async (
   storageGoodId: number,
 ): Promise<StorageActualInfo> => {

src/component/orderProcessing/EngravingChatAndButtons.tsx

@@ -17,25 +17,29 @@ export const EngravingChatAndButtons: FC<EngravingChatAndButtonsProps> = (
 
   const { canReadTicketMessages } = useUserPermissions()
 
-  if (isViewOnlyMode && !isOrderHasTicket) {
-    return <></>
-  }
-
   return (
     <Flex h="full" flex={1} direction="column" gap={2}>
-      {!isViewOnlyMode && <Buttons isOrderHasTicket={isOrderHasTicket} />}
+      <Buttons
+        isOrderHasTicket={isOrderHasTicket}
+        isViewOnlyMode={isViewOnlyMode}
+      />
 
       {isOrderHasTicket && canReadTicketMessages && <Chat />}
     </Flex>
   )
 }
 
-export const Buttons: FC<{ isOrderHasTicket?: boolean }> = (props) => {
-  const { isOrderHasTicket } = props
+interface ButtonsProps {
+  isOrderHasTicket?: boolean
+  isViewOnlyMode?: boolean
+}
+
+export const Buttons: FC<ButtonsProps> = (props) => {
+  const { isOrderHasTicket, isViewOnlyMode } = props
 
   return (
-    <Container h={isOrderHasTicket ? undefined : "full"}>
-      <ProcessingOrderButtons />
+    <Container h={isOrderHasTicket ? "fit-content" : "full"}>
+      <ProcessingOrderButtons isViewOnlyMode={isViewOnlyMode} />
     </Container>
   )
 }

src/component/orderProcessing/ProcessingOrderButtons.tsx

@@ -1,4 +1,5 @@
 import { Flex } from "@chakra-ui/react"
+import { BackBtn } from "component/orderProcessing/buttons/BackBtn"
 import { FinishBtn } from "component/orderProcessing/buttons/FinishBtn"
 import { PauseBtn } from "component/orderProcessing/buttons/PauseBtn"
 import { TakeBreakBtn } from "component/orderProcessing/buttons/TakeBreakBtn"
@@ -10,12 +11,14 @@ import { useProcessingOrderStatusUpdateMutation } from "service/engraver/process
 import { ProcessingOrderStatusUpdate } from "type/engraver/processingOrder"
 import { notify } from "util/toasts"
 
-interface ProcessingOrderButtonsProps {}
+interface ProcessingOrderButtonsProps {
+  isViewOnlyMode?: boolean
+}
 
 export const ProcessingOrderButtons: FC<ProcessingOrderButtonsProps> = (
   props,
 ) => {
-  const {} = props
+  const { isViewOnlyMode } = props
 
   const location = useLocation()
   const navigate = useNavigate()
@@ -68,11 +71,20 @@ export const ProcessingOrderButtons: FC<ProcessingOrderButtonsProps> = (
         alignItems="center"
         gap={5}
       >
-        <FinishBtn onClick={handleFinishClick} isLoading={isLoading} />
-
-        <PauseBtn onClick={handlePauseClick} isLoading={isLoading} />
-
-        <TakeBreakBtn w="full" size="lg" py={8} px={10} />
+        {isViewOnlyMode ? (
+          <BackBtn
+            onClick={navigateToOrdersForEngravingPage}
+            isLoading={isLoading}
+          />
+        ) : (
+          <>
+            <FinishBtn onClick={handleFinishClick} isLoading={isLoading} />
+
+            <PauseBtn onClick={handlePauseClick} isLoading={isLoading} />
+
+            <TakeBreakBtn w="full" size="lg" py={8} px={10} />
+          </>
+        )}
       </Flex>
     </>
   )

src/component/orderProcessing/buttons/BackBtn.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@chakra-ui/react"
+import { FC } from "react"
+
+interface BackBtnProps {
+  onClick: () => void
+  isLoading: boolean
+}
+
+export const BackBtn: FC<BackBtnProps> = (props) => {
+  const { onClick, isLoading } = props
+
+  const handleClick = async () => {
+    onClick()
+  }
+
+  return (
+    <Button
+      w="full"
+      variant="secondary"
+      size="lg"
+      py={8}
+      px={10}
+      onClick={handleClick}
+      isLoading={isLoading}
+    >
+      Back
+    </Button>
+  )
+}

src/component/productionInfo/ProductionInfoModal.tsx

@@ -14,6 +14,7 @@ import {
 import { ModalBackgroundBlur } from "component/ModalBackgroundBlur"
 import { SKUBadge } from "component/badge/SKUBadge"
 import { ProductionInfoModalInput } from "component/productionInfo/ProductionInfoModalInput"
+import { useCommentInput } from "hook/useCommentInput"
 import { FC, useEffect, useState } from "react"
 import { useProductionInfoUpdateMutation } from "service/productionInfo/productionInfo"
 import { ModalProps } from "type/modalProps"
@@ -28,7 +29,7 @@ import { notify } from "util/toasts"
 
 interface ProductionInfoModalProps extends ModalProps {
   good: WithId<StorageGood>
-  prevProductionInfo?: ProductionInfo
+  prevProductionInfo?: WithId<ProductionInfo>
   accessibleColumns: (TableColumn | null)[]
 }
 
@@ -41,16 +42,26 @@ export const ProductionInfoModal: FC<ProductionInfoModalProps> = (props) => {
   const accessibleParams = accessibleColumns.map((column) => column?.param)
 
   const [productionInfo, setProductionInfo] = useState<
-    ProductionInfo | undefined
+    WithId<ProductionInfo> | undefined
   >(prevProductionInfo)
+  const productionInfoId = productionInfo?.id
+
+  const { CommentInputComponent, onCommentSubmit, handleCommentClear } =
+    useCommentInput({
+      objectName: "production_info",
+      objectId: productionInfoId,
+    })
 
   const productionInfoUpdateMutation = useProductionInfoUpdateMutation()
 
   const isLoading = productionInfoUpdateMutation.isLoading
 
-  const handleChange = (param: string, value: number | string) => {
+  const handleChange = <K extends keyof ProductionInfo>(
+    param: K,
+    value: ProductionInfo[K],
+  ) => {
     setProductionInfo((prevProductionInfo) => ({
-      ...prevProductionInfo,
+      ...(prevProductionInfo || ({} as WithId<ProductionInfo>)),
       [param]: value,
     }))
   }
@@ -61,7 +72,10 @@ export const ProductionInfoModal: FC<ProductionInfoModalProps> = (props) => {
       good_id: goodId!,
     }
 
-    await productionInfoUpdateMutation.mutateAsync(body)
+    const { id: updatedProductionInfoId } =
+      await productionInfoUpdateMutation.mutateAsync(body)
+
+    onCommentSubmit(updatedProductionInfoId)
 
     notify(`Storage Good #${goodId} Production updated successfully`, "success")
 
@@ -106,6 +120,7 @@ export const ProductionInfoModal: FC<ProductionInfoModalProps> = (props) => {
             </Flex>
             <Divider />
 
+            {/* Engraving Params */}
             <Grid templateColumns="repeat(2, 1fr)" gap={5}>
               {/* Power */}
               {isFieldAvailable("power") && (
@@ -263,6 +278,9 @@ export const ProductionInfoModal: FC<ProductionInfoModalProps> = (props) => {
                 />
               )}
             </Grid>
+
+            {/* Comment */}
+            {CommentInputComponent}
           </Flex>
         </ModalBody>
 

src/component/productionInfo/ProductionInfoTableRow.tsx

@@ -6,6 +6,7 @@ import { TableTdSkeleton } from "component/customTable/TableTdSkeleton"
 import { ProductionInfoModal } from "component/productionInfo/ProductionInfoModal"
 import { ProductionInfoTableRowMenu } from "component/productionInfo/ProductionInfoTableRowMenu"
 import { useUserContext } from "context/user"
+import { useCommentInput } from "hook/useCommentInput"
 import { useUserTableAccess } from "hook/useUserTableAccess"
 import { FC, useEffect } from "react"
 import { useQuery } from "react-query"
@@ -32,6 +33,7 @@ export const ProductionInfoTableRow: FC<ProductionInfoTableRowProps> = (
 
   const good = goodWithProductionInfo
   const productionInfo = good.production_info
+  const productionInfoId = productionInfo?.id
 
   const goodTotalQuantity = good.quantity
   const goodsShelvesList = good?.shelf
@@ -68,6 +70,12 @@ export const ProductionInfoTableRow: FC<ProductionInfoTableRowProps> = (
 
   const goodPrimeCost = storageActualInfo?.prime_cost
 
+  const { CommentComponent } = useCommentInput({
+    objectName: "production_info",
+    objectId: productionInfoId,
+    isAsTooltip: true,
+  })
+
   useEffect(() => {
     refetch()
   }, [refetch, selectedShopId])
@@ -127,11 +135,17 @@ export const ProductionInfoTableRow: FC<ProductionInfoTableRowProps> = (
           )
         })}
 
-        {/* Menu Btns */}
+        {/* Comment & Menu Btns */}
         <Td>
-          <ProductionInfoTableRowMenu
-            onEdit={onProductionInfoUpdateModalOpen}
-          />
+          <Flex direction="row" alignItems="center" gap={2}>
+            {/* Comment */}
+            {CommentComponent}
+
+            {/* Menu Btns */}
+            <ProductionInfoTableRowMenu
+              onEdit={onProductionInfoUpdateModalOpen}
+            />
+          </Flex>
         </Td>
       </Tr>
 

src/component/storage/RevertDeliveryModal.tsx

@@ -0,0 +1,79 @@
+import {
+  Button,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Text,
+} from "@chakra-ui/react"
+import { ModalBackgroundBlur } from "component/ModalBackgroundBlur"
+import { FC } from "react"
+import { useRevertDeliveryMutation } from "service/storage/storage"
+import { ModalProps } from "type/modalProps"
+import { notify } from "util/toasts"
+
+interface RevertDeliveryModalProps extends ModalProps {
+  deliveryId: number
+}
+
+export const RevertDeliveryModal: FC<RevertDeliveryModalProps> = (props) => {
+  const { deliveryId, isOpen, onClose } = props
+
+  const deliveryRevertMutation = useRevertDeliveryMutation()
+
+  const isLoading = deliveryRevertMutation.isLoading
+
+  const onRevertConfirm = async () => {
+    await deliveryRevertMutation.mutateAsync(deliveryId)
+
+    notify(`Delivery #${deliveryId} was successfully reverted`, "success")
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalBackgroundBlur />
+
+      <ModalContent>
+        <ModalHeader>Revert Delivery</ModalHeader>
+        <ModalCloseButton />
+
+        <ModalBody>
+          <Flex w="full" direction="column" gap={5}>
+            <Text>
+              Are you sure you want to revert{" "}
+              <Text as="span" fontWeight="bold">
+                Delivery #{deliveryId}
+              </Text>
+            </Text>
+
+            <Text color="hint">
+              All Storage Goods from the Delivery will be reverted too, do not
+              forget to move the Delivery to Storage again correctly
+            </Text>
+          </Flex>
+        </ModalBody>
+
+        <ModalFooter>
+          <Flex gap={5}>
+            <Button
+              variant="danger"
+              onClick={onRevertConfirm}
+              isLoading={isLoading}
+              isDisabled={isLoading}
+            >
+              Revert
+            </Button>
+
+            <Button variant="secondary" onClick={onClose}>
+              Cancel
+            </Button>
+          </Flex>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

src/component/storage/StorageCard.tsx

@@ -9,6 +9,7 @@ import {
   Text,
   useDisclosure,
 } from "@chakra-ui/react"
+import { RevertDeliveryModal } from "component/storage/RevertDeliveryModal"
 import { StorageCardMenu } from "component/storage/StorageCardMenu"
 import { StorageDeleteModal } from "component/storage/StorageDeleteModal"
 import { StorageModal } from "component/storage/StorageModal"
@@ -41,12 +42,21 @@ export const StorageCard: FC<StorageCardProps> = (props) => {
   const isPrimeCostExists = storage.prime_cost !== undefined
   const isItemPriceExists = storage.cost_per_item !== undefined
 
+  // * Revert To Delivery Modal
+  const {
+    isOpen: isRevertDeliveryModalOpen,
+    onOpen: onRevertDeliveryModalOpen,
+    onClose: onRevertDeliveryModalClose,
+  } = useDisclosure()
+
+  // * Update Modal
   const {
     isOpen: isStorageUpdateModalOpen,
     onOpen: onStorageUpdateModalOpen,
     onClose: onStorageUpdateModalClose,
   } = useDisclosure()
 
+  // * Delete Modal
   const {
     isOpen: isStorageDeleteModalOpen,
     onOpen: onStorageDeleteModalOpen,
@@ -70,6 +80,8 @@ export const StorageCard: FC<StorageCardProps> = (props) => {
           </Flex>
 
           <StorageCardMenu
+            isFromDelivery={isFromDelivery}
+            onRevertDelivery={onRevertDeliveryModalOpen}
             onEdit={onStorageUpdateModalOpen}
             onDelete={onStorageDeleteModalOpen}
           />
@@ -150,6 +162,14 @@ export const StorageCard: FC<StorageCardProps> = (props) => {
 
       {/* Modals */}
       <>
+        {isFromDelivery && (
+          <RevertDeliveryModal
+            deliveryId={deliveryId}
+            isOpen={isRevertDeliveryModalOpen}
+            onClose={onRevertDeliveryModalClose}
+          />
+        )}
+
         <StorageModal
           storageGoodId={storageGoodId}
           prevStorage={storage}