umwd-components 0.1.623 → 0.1.624

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"
+      }
+    />
+  );
+};

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

@@ -0,0 +1,450 @@
+import React, { useEffect, useState } from "react";
+import { useFormState } from "react-dom";
+import { updateIpoAction } from "../../../data/actions/logistics/ipo/updateIpoAction";
+import { UploadBase64MediaForm } from "../../../components/common/media/UploadBase64MediaForm";
+import downloadBase64File from "../../../data/loaders/common/media/downloadBase64File";
+import ItemUpdater from "./IROItemUpdater";
+import ItemDisplay from "./IroItemDisplay";
+import {
+  IroItem,
+  ManageIroFormProps,
+} from "../../../types/e-commerce/iro/types";
+import NotesDisplay from "../../logistics/note/NotesDisplay";
+import NoteTakingComponent from "../../logistics/note/NoteTakingComponent";
+import { StrapiErrors } from "../../../components/StrapiErrors";
+import { SubmitButton } from "../../../components/SubmitButton";
+import Alert from "@mui/material/Alert";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Divider from "@mui/material/Divider";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import { confirmationService } from "../../../data/services/common/confirmation-service";
+
+const INITIAL_STATE = {
+  zodErrors: null,
+  strapiErrors: null,
+  data: null,
+  message: null,
+};
+
+/* const CONFIRMATION_STATE = {
+  zodErrors: null,
+  strapiErrors: null,
+  data: null,
+  message: null,
+};
+
+function ConfirmFormDialog({
+  open,
+  handleClose,
+  orderID,
+  currentStatus,
+  revalidateCallback,
+}: {
+  open: boolean;
+  handleClose: () => void;
+  orderID: number;
+  currentStatus: "placed" | "released_on_stock";
+  revalidateCallback?: () => void;
+}) {
+  const [formState, formAction] = useFormState(
+    updateIpoAction,
+    CONFIRMATION_STATE
+  );
+
+  useEffect(() => {
+    if (formState?.message === "Ipo Updated") {
+      revalidateCallback && revalidateCallback();
+      handleClose();
+    }
+  }, [formState?.message]);
+
+  return (
+    <Dialog open={open}>
+      <form action={formAction}>
+        <input name="id" type="hidden" value={orderID} />
+        <input
+          name="status"
+          type="hidden"
+          value={currentStatus === "placed" ? "ordered" : "done"}
+        />
+        <DialogTitle>Confirm Order</DialogTitle>
+        <DialogContent>
+          <Stack spacing={2}>
+            <Typography>
+              Are you sure you want to confirm this order?
+            </Typography>
+            <Typography>Current status: {currentStatus}</Typography>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <SubmitButton text="Confirm" loadingText="Loading..." />
+          <StrapiErrors error={formState?.strapiErrors} />
+          {formState?.message && (
+            <Alert severity="error">{formState?.message}</Alert>
+          )}
+          <Button variant="contained" color="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+} */
+
+function ConfirmFormDialog({
+  open,
+  handleClose,
+  orderID,
+  currentStatus,
+  revalidateCallback,
+}: {
+  open: boolean;
+  handleClose: () => void;
+  orderID: number;
+  currentStatus: "placed" | "released_on_stock";
+  revalidateCallback?: () => void;
+}) {
+  return (
+    <Dialog open={open}>
+      <DialogTitle>Confirm Order</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2}>
+          <Typography>Are you sure you want to confirm this order?</Typography>
+          <Typography>Current status: {currentStatus}</Typography>
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={(e) => {
+            confirmationService("ipos", [orderID]);
+            revalidateCallback && revalidateCallback();
+          }}
+        >
+          Confirm
+        </Button>
+        <Button variant="contained" onClick={handleClose}>
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default function ManageIROForm({
+  data,
+  sx,
+  revalidateCallback,
+  handleClose,
+  role,
+}: ManageIroFormProps) {
+  // TODO bind to id of IRO
+  const [formState, formAction] = useFormState(updateIpoAction, INITIAL_STATE);
+
+  const [items, setItems] = useState<IroItem[]>(
+    data.items.data ? data.items.data : []
+  );
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+
+  const parseItems = (items: IroItem[]) => {
+    return items.map((item) => {
+      return {
+        id: item.id,
+        received_quantity: item.received_quantity,
+        registered_quantity: item.registered_quantity,
+        released_quantity: item.released_quantity,
+      };
+    });
+  };
+
+  const handleUpdateQuantity = (
+    value: number,
+    itemID: number,
+    type: "received_quantity" | "registered_quantity" | "released_quantity"
+  ) => {
+    const newItems = [...items];
+    const index = newItems.findIndex((item) => item.id === itemID);
+    newItems[index][type] = value;
+    setItems(newItems);
+  };
+
+  const handleRemoveReportAtIndex = (itemID: number, index: number) => {
+    console.log(items);
+    console.log(itemID, index);
+    console.log("handleRemoveReportAtIndex");
+  };
+
+  return (
+    <Box
+      sx={[
+        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Stack spacing={2}>
+            <Stack
+              direction={"row"}
+              spacing={2}
+              justifyContent={"space-between"}
+            >
+              <Stack spacing={2}>
+                <Typography variant="h3" component={"h1"}>
+                  Management Inbound Purchase Order
+                </Typography>
+                <Typography variant="body1">
+                  Manage arrival, registration and recieval of purchase order
+                </Typography>
+              </Stack>
+              <NoteTakingComponent
+                content=""
+                related={[{ id: data.id, __type: "api::logistics.ipo" }]}
+                revalidateCallback={revalidateCallback}
+              />
+            </Stack>
+            <Divider />
+          </Stack>
+        </Grid>
+        <Grid item xs={6}>
+          <Stack spacing={1}>
+            <Typography variant="h5">Details</Typography>
+
+            <Stack direction="row" spacing={2}>
+              <Typography variant="body1" width={"250px"}>
+                Purchase Order Number
+              </Typography>
+              <Typography variant="body2">{data.iro_number}</Typography>
+            </Stack>
+
+            <Stack direction="row" spacing={2}>
+              <Typography variant="body1" width={"250px"}>
+                Custom reference
+              </Typography>
+              {/* <Typography variant="body2">{data.custom_reference}</Typography> */}
+            </Stack>
+
+            <Stack direction="row" spacing={2}>
+              <Typography variant="body1" width={"250px"}>
+                Order Date
+              </Typography>
+
+              <Typography variant="body2">{data.return_date}</Typography>
+            </Stack>
+
+            <Stack direction="row" spacing={2}>
+              <Typography variant="body1" width={"250px"}>
+                Supplier
+              </Typography>
+              {/* <Typography variant="body2">
+                {data.vendor_profile?.business_credentials?.company_name}
+              </Typography> */}
+            </Stack>
+
+            <Stack direction="row" spacing={2}>
+              <Typography variant="body1" width={"250px"}>
+                Order Status
+              </Typography>
+              <Typography variant="body2" width={"250px"}>
+                {data.status}
+              </Typography>
+            </Stack>
+
+            {/*  {(data.status === "placed" ||
+              data.status === "released_on_stock") &&
+              role === "enduser" && (
+                <>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={() => setConfirmDialogOpen(true)}
+                  >
+                    Confirm order
+                  </Button>
+                  <Alert severity="warning">
+                    Please confirm the order as soon as possible, only upon
+                    confirmation this order will be available to the dispatcher
+                  </Alert>
+                  <ConfirmFormDialog
+                    open={confirmDialogOpen}
+                    handleClose={() => setConfirmDialogOpen(false)}
+                    orderID={data.id}
+                    currentStatus={data.status}
+                    revalidateCallback={revalidateCallback}
+                  />
+                </>
+              )} */}
+          </Stack>
+        </Grid>
+        <Grid item xs={12}>
+          <Stack spacing={2}>
+            <Typography variant="h5">Documents</Typography>
+            <Paper sx={{ p: 2 }}>
+              <Stack spacing={1}>
+                {/* order confirmation is only visible to enduser, delivery note is 
+                visible to both enduser and dispatcher*/}
+                {/* if there is a order confirmation, show the order confirmation, 
+                    if there is no order confirmation show the upload fields */}
+                {role === "enduser" && (
+                  <>
+                    {/* {data.order_confirmation ? (
+                      <>
+                        <Typography variant="h6">Order Confirmation</Typography>
+                        <Typography>{data.order_confirmation?.name}</Typography>
+                        <Button
+                          variant="contained"
+                          onClick={() => {
+                            downloadBase64File(
+                              `api/ipos/${data.id}`,
+                              "order_confirmation"
+                            );
+                          }}
+                        >
+                          Download
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        <Typography variant="h5">Order Confirmation</Typography>
+                        <Typography variant="body1">
+                          Here you can upload the the order confirmation for
+                          this order
+                        </Typography>
+                        <Typography variant="body1">FileUpload</Typography>
+                        <Divider />
+                        <UploadBase64MediaForm // This form manages it's own state internally
+                          reference="api::logistics.ipo"
+                          refID={data.id}
+                          field="order_confirmation"
+                          multiple={false}
+                          accept="text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                          path="api/ipos"
+                          componentName="order_confirmation"
+                          componentReference="common.base64-encoded-media"
+                          revalidateCallback={revalidateCallback}
+                        />
+                      </>
+                    )} */}
+                  </>
+                )}
+                {/* {data.delivery_note ? (
+                  <>
+                    <Typography variant="h6">Delivery Note</Typography>
+                    <Typography>{data.delivery_note?.name}</Typography>
+                    <Button
+                      variant="contained"
+                      onClick={() => {
+                        downloadBase64File(
+                          `api/ipos/${data.id}`,
+                          "delivery_note"
+                        );
+                      }}
+                    >
+                      Download
+                    </Button>
+                  </>
+                ) : (
+                  <>
+                    <Typography variant="h5">Delivery Note</Typography>
+                    <Typography variant="body1">
+                      Here you can upload the the delivery note for this order
+                    </Typography>
+                    <Divider />
+                    <UploadBase64MediaForm
+                      reference="api::logistics.ipo"
+                      refID={data.id}
+                      field="delivery_note"
+                      multiple={false}
+                      accept="text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      path="api/ipos"
+                      componentName="delivery_note"
+                      componentReference="common.base64-encoded-media"
+                      revalidateCallback={revalidateCallback}
+                    />
+                  </>
+                )} */}
+              </Stack>
+            </Paper>
+          </Stack>
+        </Grid>
+
+        {data?.notes?.data?.length > 0 && (
+          <Grid item xs={12}>
+            <Stack spacing={2}>
+              <Typography variant="h5">Notes</Typography>
+              <NotesDisplay notes={data.notes.data} />
+              <Divider />
+            </Stack>
+          </Grid>
+        )}
+
+        <Grid item xs={12}>
+          <Stack spacing={1}>
+            <Typography variant="h5">Items</Typography>
+            {/* {data.status === "placed" && (
+              <Alert severity="warning">
+                Before confirmation you cannot update the items
+              </Alert>
+            )} */}
+            <Divider />
+            <form action={formAction}>
+              {/** INFO - This form is for updating the items, it should be a separate form from the one that
+               * uploads the files since forms cannot be nested in HTML, however the SubmitButton component
+               * should be within the form, thats why the form spans two grid items
+               * */}
+              <input name="id" type="hidden" value={data.id} />
+              {data?.items?.data &&
+                data.items.data.map((item: IroItem, index: number) => {
+                  console.log("item", item);
+                  return (
+                    <Paper sx={{ p: 2, mb: 2 }} key={index}>
+                      {/* {data.status === "placed" ? (
+                        <ItemDisplay
+                          item={item}
+                          index={index}
+                          image={item?.product?.image}
+                        />
+                      ) : (
+                        <ItemUpdater
+                          item={item}
+                          index={index}
+                          handleUpdateQuantity={handleUpdateQuantity}
+                          image={item?.product?.image}
+                          // handleRemoveReportAtIndex={handleRemoveReportAtIndex}
+                          revalidateCallback={revalidateCallback}
+                        />
+                      )} */}
+                    </Paper>
+                  );
+                })}
+              <Paper sx={{ p: 2 }}>
+                <Stack direction="row" spacing={2} justifyContent={"end"}>
+                  <SubmitButton text="Update items" loadingText="Loading..." />
+                  <StrapiErrors error={formState?.strapiErrors} />
+                  {formState?.message && (
+                    <Alert severity="error">{formState?.message}</Alert>
+                  )}
+                </Stack>
+              </Paper>
+              <input
+                type="hidden"
+                name="items"
+                value={JSON.stringify(parseItems(items))}
+              />
+            </form>
+          </Stack>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}