umwd-components 0.1.715 → 0.1.717

package/src/components/logistics/ipo/AddIPOForm.tsx

@@ -1,182 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Paper from "@mui/material/Paper";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
-import Button from "@mui/material/Button";
-
-import { SubmitButton } from "../../SubmitButton";
-import { useFormState } from "react-dom";
-import { createIPOAction } from "../../../data/actions/logistics/ipo/createIPOAction";
-import Grid from "@mui/material/Grid";
-
-import { VendorProductName } from "../../../types/e-commerce/product/types";
-import { VendorName } from "../../../types/logistics/Vendor";
-import VendorSelector from "../../../components/logistics/vendor/VendorSelector";
-import { getSingleVendor } from "../../../data/loaders/logistics/getSingleVendor";
-
-import { IPOItemFields } from "./IPOItemFields";
-import { SxProps, Theme } from "@mui/material/styles";
-
-// import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-// import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { useSnackbar } from "../../../context/common/SnackbarContext";
-// TODO: order date should be set by the user
-
-const INITIAL_STATE = {
-  zodErrors: null,
-  strapiErrors: null,
-  data: null,
-  message: null,
-  severity: null,
-};
-
-interface AddIPOFormProps {
-  vendorNamesArr: VendorName[];
-  sx?: SxProps<Theme>;
-  revalidateCallback?: () => void;
-  handleClose?: () => void;
-}
-
-export function AddIPOForm({
-  vendorNamesArr,
-  sx,
-  revalidateCallback,
-  handleClose,
-}: AddIPOFormProps) {
-  const [formState, formAction] = useFormState(createIPOAction, INITIAL_STATE);
-  const [productsArr, setProductsArr] = useState<VendorProductName[]>([]);
-  const [vendorID, setVendorID] = useState<number | null>(null);
-  const { handleAddMessage } = useSnackbar();
-
-  useEffect(() => {
-    if (formState?.message) {
-      handleAddMessage({
-        message: formState.message,
-        severity: formState.severity || "error",
-      });
-
-      if (formState.severity === "success") {
-        revalidateCallback && revalidateCallback();
-        handleClose && handleClose();
-      }
-    }
-  }, [formState?.message]);
-
-  useEffect(() => {
-    if (formState?.strapiErrors) {
-      handleAddMessage({
-        message: formState.strapiErrors.message || "Error performing action",
-        severity: "error",
-      });
-    }
-  }, [formState?.strapiErrors]);
-
-  const handleVendorSelect = async (selectedVendorID: number | null) => {
-    setVendorID(selectedVendorID);
-    if (!selectedVendorID) {
-      setProductsArr([]);
-      return;
-    }
-    const vendor = await getSingleVendor(selectedVendorID);
-    setProductsArr(vendor?.products?.data);
-  };
-  return (
-    <Box
-      sx={[
-        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      <form action={formAction}>
-        <Grid container spacing={2}>
-          <Grid item xs={12}>
-            <Stack spacing={2}>
-              <Typography variant="h3" component="h1">
-                Add IPO
-              </Typography>
-              <Typography variant="body1">
-                Create a new incoming purchase order
-              </Typography>
-            </Stack>
-          </Grid>
-
-          <Grid item xs={12} md={6} sx={{ mt: 1 }}>
-            {vendorNamesArr ? (
-              <VendorSelector
-                vendorNames={vendorNamesArr}
-                currentValue={null}
-                onSelectVendor={handleVendorSelect}
-                // TODO: Fetch products based on selectedVendor and update productsArr
-              />
-            ) : (
-              <Typography>
-                No vendors on file, you need to create a vendor first before you
-                are able to create incoming purchase orders
-              </Typography>
-            )}
-          </Grid>
-          <Grid item xs={12}>
-            <Stack spacing={2}>
-              <Typography variant="h5">Order Details</Typography>
-              <Typography variant="body1">
-                The orderdate should be the official date of the order, don't
-                worry, you can also set days in the past or future
-              </Typography>
-              <LocalizationProvider dateAdapter={AdapterDayjs}>
-                <DatePicker name="order_date" label="Order Date" />
-              </LocalizationProvider>
-
-              <Typography variant="body1">
-                Please enter a custom reference for this order
-              </Typography>
-              <TextField
-                id="customer_reference"
-                name="customer_reference"
-                type="text"
-                label="Custom Reference"
-                // error={formErrors.customer_reference != undefined ? true : false}
-                // helperText={formErrors.customer_reference}
-              ></TextField>
-
-              <Divider />
-            </Stack>
-          </Grid>
-          <Grid item xs={12}>
-            <IPOItemFields productsArr={productsArr} vendorID={vendorID} />
-          </Grid>
-          <Grid item xs={12}>
-            <Stack
-              direction="row"
-              justifyContent="space-between"
-              alignItems="center"
-              sx={{ mt: 2 }}
-            >
-              {handleClose && (
-                <Button onClick={handleClose} variant="outlined">
-                  Cancel
-                </Button>
-              )}
-              <SubmitButton
-                text="Create IPO"
-                loadingText="Creating..."
-                variant="contained"
-              />
-            </Stack>
-          </Grid>
-        </Grid>
-      </form>
-    </Box>
-  );
-}
-
-{
-  /* TODO, add and create contactFields, <ContactFields componentName="contacts" componentsReference="logistics-elements.contact"/> */
-}

package/src/components/logistics/ipo/IPOItemFields.tsx

@@ -1,254 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableRow from "@mui/material/TableRow";
-import IconButton from "@mui/material/IconButton";
-import AddIcon from "@mui/icons-material/Add";
-import Typography from "@mui/material/Typography";
-import Stack from "@mui/material/Stack";
-import TextField from "@mui/material/TextField";
-import ProductSelector from "../../../components/e-commerce/products/ProductSelector";
-import { VendorProductName } from "../../../types/e-commerce/product/types";
-import WeekPicker from "../../../components/common/WeekPicker";
-// import { getWeek } from "date-fns"; // TODO see if we can do without this
-import dayjs from "dayjs";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { useTheme } from "@mui/material/styles";
-
-const getWeek = (date: Date) => {
-  return dayjs(date).isoWeek();
-};
-
-export function IPOItemFields({
-  productsArr,
-  vendorID = null,
-}: {
-  productsArr: VendorProductName[];
-  vendorID: number | null;
-}) {
-  const [items, setItems] = useState<
-    { product: VendorProductName; amount: number; pdw: Date }[]
-  >([]);
-  const [nextProductName, setNextProductName] =
-    useState<VendorProductName | null>(null);
-  const [nextAmount, setNextAmount] = useState<number>(0);
-  const [nextPDW, setNextPDW] = useState<Date>(new Date()); // preffered delivery week
-  const [selectedProduct, setSelectedProduct] = useState<number[]>([]);
-
-  const handleAddItem = () => {
-    if (nextProductName === null || nextAmount === null) {
-      console.log("nextProductName or nextAmount is null");
-      return;
-    }
-    const newItem = {
-      product: nextProductName,
-      amount: nextAmount,
-      pdw: nextPDW,
-    };
-    setItems([...items, newItem]);
-    // reset the fields
-    setNextProductName(null);
-    setNextAmount(0);
-    setNextPDW(new Date());
-    setSelectedProduct([]);
-  };
-
-  const handleDeleteItem = (index: number) => {
-    const newItems = items.filter((_, i) => i !== index);
-    setItems(newItems);
-  };
-
-  const theme = useTheme();
-
-  useEffect(() => {
-    setItems([]);
-  }, [vendorID]);
-
-  type parsedIpoItem = {
-    line_item_number: string;
-    product: number;
-    ordered_quantity: number;
-    expected_delivery_date: Date;
-  };
-
-  const parseItems = (
-    items: { product: VendorProductName; amount: number; pdw: Date }[]
-  ): parsedIpoItem[] => {
-    return items.map((item, index) => {
-      return {
-        line_item_number: `${index + 1}.0.0`,
-        product: item.product.id,
-        ordered_quantity: item.amount,
-        expected_delivery_date: item.pdw,
-      };
-    });
-  };
-
-  const [parsedItems, setParsedItems] = useState<parsedIpoItem[]>([]);
-
-  useEffect(() => {
-    setParsedItems(parseItems(items));
-  }, [items]);
-
-  return (
-    <Stack spacing={2}>
-      <Typography variant="h5">Adding the products</Typography>
-      <Typography variant="body1">
-        Please select the products that are in the purchase order
-      </Typography>
-      <Typography variant="body2">
-        Only products by the selected supplier can be added
-      </Typography>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell
-              id="line_item_number"
-              sx={[
-                { width: "15%" },
-                vendorID === null && {
-                  color: theme.palette.text.disabled,
-                },
-              ]}
-            >
-              Line Item Number
-            </TableCell>
-
-            <TableCell
-              sx={[
-                { width: "55%" },
-                vendorID === null && {
-                  color: theme.palette.text.disabled,
-                },
-              ]}
-            >
-              Product Number
-            </TableCell>
-            <TableCell
-              sx={[
-                { width: "15%" },
-                vendorID === null && {
-                  color: theme.palette.text.disabled,
-                },
-              ]}
-            >
-              Amount
-            </TableCell>
-            <TableCell
-              sx={[
-                { width: "15%" },
-                vendorID === null && {
-                  color: theme.palette.text.disabled,
-                },
-              ]}
-            >
-              Preferred delivery week
-            </TableCell>
-            <TableCell
-              sx={[
-                vendorID === null && {
-                  color: theme.palette.text.disabled,
-                },
-              ]}
-            ></TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {items.map((item, index) => {
-            return (
-              <TableRow key={index}>
-                <TableCell
-                  sx={[
-                    { width: "15%" },
-                    vendorID === null && { color: theme.palette.text.disabled },
-                  ]}
-                >
-                  {index + 1}.0.0
-                </TableCell>
-                <TableCell
-                  sx={[
-                    { width: "55%" },
-                    vendorID === null && { color: theme.palette.text.disabled },
-                  ]}
-                >
-                  {item.product.product_number} | {item.product.title}
-                </TableCell>
-                <TableCell sx={{ width: "15%" }}>{item.amount}</TableCell>
-
-                <TableCell sx={{ width: "10%" }}>{getWeek(item.pdw)}</TableCell>
-                <TableCell align="right" sx={{ width: "5%" }}>
-                  <IconButton onClick={() => handleDeleteItem(index)}>
-                    <DeleteIcon />
-                  </IconButton>
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-      <input
-        type="hidden"
-        name="ipo_items"
-        value={JSON.stringify(parsedItems)}
-      />
-
-      <Stack
-        direction="row"
-        spacing={1}
-        alignItems="center"
-        sx={{ p: 2, width: "100%" }}
-      >
-        <Typography variant="body1" sx={{ width: "15%" }}>
-          {items.length + 1}.0.0
-        </Typography>
-        {productsArr && (
-          <ProductSelector
-            productNames={productsArr}
-            currentValue={selectedProduct}
-            sx={{ width: "55%" }}
-            multiple={false}
-            onChangeCallback={(ids: number[]) => {
-              const product = productsArr.find((p) => p.id === ids[0]);
-              setNextProductName(product || null);
-              setSelectedProduct(ids);
-            }}
-          />
-        )}
-        <TextField
-          id="amount"
-          name="amount"
-          type="number"
-          label="Amount"
-          value={nextAmount}
-          onChange={(e) => {
-            if (e.target.value === "") {
-              setNextAmount(0);
-              return;
-            }
-            if (parseInt(e.target.value) < 0) {
-              setNextAmount(0);
-              return;
-            }
-            setNextAmount(parseInt(e.target.value));
-          }}
-          disabled={vendorID === null}
-          sx={{ width: "15%" }}
-        ></TextField>
-        <WeekPicker
-          value={nextPDW}
-          onChangeCallback={(date: Date) => {
-            setNextPDW(date);
-          }}
-          label="Preferred delivery week"
-          disabled={false}
-        />
-
-        <IconButton disabled={vendorID === null} onClick={handleAddItem}>
-          <AddIcon />
-        </IconButton>
-      </Stack>
-    </Stack>
-  );
-}

package/src/components/logistics/ipo/IPOItemUpdater.tsx

@@ -1,140 +0,0 @@
-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 "../report/ReportMakingComponent";
-import ReportsDisplay from "../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/logistics/ipo/IpoStatusIndicator.tsx

@@ -1,81 +0,0 @@
-"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 IpoStatusIndicatorProps {
-  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 IpoStatusIndicator: React.FC<IpoStatusIndicatorProps> = ({
-  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"
-      }
-    />
-  );
-};

package/src/components/logistics/ipo/ItemDisplay.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-
-import { ItemDisplayProps } from "../../../types/logistics/Ipo";
-import ImagePreviewTooltip from "../../../components/common/ImagePreviewTooltip";
-
-function ItemDisplay({ item, index, image }: ItemDisplayProps) {
-  const { line_item_number, product, ordered_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: {ordered_quantity}
-            </Typography>
-          </Stack>
-          {image && (
-            <>
-              <ImagePreviewTooltip image={image} label={item.product.title} />
-            </>
-          )}
-        </Stack>
-      )}
-    </Stack>
-  );
-}
-
-export default ItemDisplay;