umwd-components 0.1.622 → 0.1.624

package/src/components/e-commerce/iro/IROItemUpdater.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Divider from "@mui/material/Divider";
+import Collapse from "@mui/material/Collapse";
+import AmountUpdater from "../../common/AmountUpdater";
+import ArrowButtonDownIcon from "@mui/icons-material/ArrowDropDown";
+
+import { ItemUpdaterProps } from "../../../types/logistics/Ipo";
+import ImagePreviewTooltip from "../../common/ImagePreviewTooltip";
+import { Report } from "../../../types/logistics/Report";
+import ReportMakingComponent from "../../logistics/report/ReportMakingComponent";
+import ReportsDisplay from "../../logistics/report/ReportsDisplay";
+
+function ItemUpdater({
+  item,
+  index,
+  handleUpdateQuantity,
+  image,
+  revalidateCallback,
+}: ItemUpdaterProps) {
+  const {
+    line_item_number,
+    product,
+    received_quantity,
+    registered_quantity,
+    released_quantity,
+    ordered_quantity,
+    reports,
+  } = item;
+
+  const received_bad_quantity =
+    reports?.data !== undefined && reports.data.length > 0
+      ? reports.data
+          .filter((report) => report.type === "received")
+          .reduce((a, b) => a + b.quantity, 0)
+      : 0;
+
+  const registered_bad_quantity =
+    reports?.data !== undefined && reports.data.length > 0
+      ? reports.data
+          .filter((report) => report.type === "registered")
+          .reduce((a, b) => a + b.quantity, 0)
+      : 0;
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Stack spacing={1} key={index}>
+      {item && (
+        <>
+          <Stack direction={"row"} justifyContent={"space-between"}>
+            <Stack spacing={1}>
+              <Typography variant="body1">
+                Line Item Number: {line_item_number}
+              </Typography>
+              <Typography variant="body1">
+                Part Number: {product.product_number}
+              </Typography>
+            </Stack>
+            {image && (
+              <>
+                <ImagePreviewTooltip image={image} label={item.product.title} />
+              </>
+            )}
+          </Stack>
+          <Typography variant="body2">Received</Typography>
+          <AmountUpdater
+            currentValue={received_quantity}
+            totalValue={ordered_quantity + received_bad_quantity}
+            minNewValue={0 + registered_quantity + -registered_bad_quantity}
+            maxNewValue={ordered_quantity + received_bad_quantity}
+            color={"info"}
+            handleChange={(newValue) => {
+              handleUpdateQuantity(newValue, item.id, "received_quantity");
+            }}
+          />
+          <Typography variant="body2">Registered</Typography>
+          <AmountUpdater
+            currentValue={registered_quantity}
+            totalValue={ordered_quantity + received_bad_quantity}
+            minNewValue={0 + released_quantity}
+            maxNewValue={received_quantity + registered_bad_quantity}
+            color={"info"}
+            handleChange={(newValue) => {
+              handleUpdateQuantity(newValue, item.id, "registered_quantity");
+            }}
+            offsetEnd={registered_bad_quantity}
+          />
+          <Divider sx={{ p: 0 }}>
+            <Stack direction={"row"} spacing={1} alignItems={"center"}>
+              <Typography variant="body2">
+                Irregularities / Corrections
+              </Typography>
+              <IconButton onClick={() => setOpen(!open)}>
+                <ArrowButtonDownIcon />
+              </IconButton>
+            </Stack>
+          </Divider>
+
+          <Collapse in={open}>
+            <Stack spacing={2}>
+              <Typography variant="body2">
+                Here you can report and correct for damages wrong items etc. Do
+                not forget to click the button!
+              </Typography>
+              <ReportsDisplay reports={reports.data as Report[]} />
+              <ReportMakingComponent
+                content={"content"}
+                quantity={0}
+                type="registered"
+                minValue={-(received_quantity + registered_bad_quantity)}
+                maxValue={received_quantity}
+                related={[{ id: item.id, __type: "api::logistics.ipo-item" }]}
+                revalidateCallback={revalidateCallback}
+              />
+            </Stack>
+          </Collapse>
+
+          <Typography variant="body2">Released</Typography>
+          <AmountUpdater
+            currentValue={released_quantity || 0}
+            totalValue={
+              ordered_quantity + received_bad_quantity + registered_bad_quantity
+            }
+            minNewValue={0}
+            maxNewValue={registered_quantity}
+            color={"info"}
+            handleChange={(newValue) => {
+              handleUpdateQuantity(newValue, item.id, "released_quantity");
+            }}
+          />
+        </>
+      )}
+    </Stack>
+  );
+}
+
+export default ItemUpdater;

package/src/components/e-commerce/iro/IroItemDisplay.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+import { IroItemDisplayProps } from "../../../types/e-commerce/iro/types";
+import ImagePreviewTooltip from "../../../components/common/ImagePreviewTooltip";
+
+function IroItemDisplay({ item, index, image }: IroItemDisplayProps) {
+  const { line_item_number, product, returned_quantity } = item;
+
+  return (
+    <Stack spacing={1} key={index}>
+      {item && (
+        <Stack
+          direction={"row"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+        >
+          <Stack spacing={1}>
+            <Typography variant="body1">
+              Line Item Number: {line_item_number}
+            </Typography>
+            <Typography variant="body1">
+              Part Number: {product?.product_number}
+            </Typography>
+            <Typography variant="body1">
+              Quantity Ordered: {returned_quantity}
+            </Typography>
+          </Stack>
+          {image && (
+            <>
+              <ImagePreviewTooltip image={image} label={item.product?.title} />
+            </>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+}
+
+export default IroItemDisplay;

package/src/components/e-commerce/iro/IroStatusIndicator.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+
+import Chip from "@mui/material/Chip";
+
+import { IpoStatus } from "../../../types/logistics/Ipo";
+import { Role } from "../../../types/auth/Role";
+
+interface IroStatusIndicatorProps {
+  status: IpoStatus;
+  provider_id?: string;
+  role?: Role;
+}
+
+const statusColorArray: {
+  status: IpoStatus;
+  color: "warning" | "info" | "success" | "error" | "default";
+}[] = [
+  { status: "placed", color: "info" },
+  { status: "ordered", color: "info" },
+  { status: "logistics_operator_process", color: "info" },
+  { status: "released_on_stock", color: "info" },
+  { status: "done", color: "success" },
+  { status: "cancelled", color: "error" },
+  { status: null, color: "default" },
+];
+
+const enduserStatusColorArray: {
+  status: IpoStatus;
+  color: "warning" | "info" | "success" | "error" | "default";
+}[] = [
+  { status: "placed", color: "warning" },
+  { status: "ordered", color: "info" },
+  { status: "logistics_operator_process", color: "info" },
+  { status: "released_on_stock", color: "info" },
+  { status: "done", color: "success" },
+  { status: "cancelled", color: "error" },
+  { status: null, color: "default" },
+];
+
+const dispatcherStatusColorArray: {
+  status: IpoStatus;
+  color: "warning" | "info" | "success" | "error" | "default";
+}[] = [
+  { status: "placed", color: "info" },
+  { status: "ordered", color: "warning" },
+  { status: "logistics_operator_process", color: "info" },
+  { status: "released_on_stock", color: "info" },
+  { status: "done", color: "success" },
+  { status: "cancelled", color: "error" },
+  { status: null, color: "default" },
+];
+
+export const IroStatusIndicator: React.FC<IroStatusIndicatorProps> = ({
+  status,
+  role,
+}) => {
+  const readableStatus = status
+    ? status
+        .split("_")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ")
+    : "Unknown";
+
+  return (
+    <Chip
+      label={readableStatus}
+      color={
+        role === "enduser"
+          ? enduserStatusColorArray.find((s) => s.status === status)?.color ||
+            "default"
+          : role === "dispatcher"
+          ? dispatcherStatusColorArray.find((s) => s.status === status)
+              ?.color || "default"
+          : statusColorArray.find((s) => s.status === status)?.color ||
+            "default"
+      }
+    />
+  );
+};