adding cancel reason in dropdown

src/views/orders/ViewOrders.js

@@ -17,7 +17,7 @@ import {
   DialogContentText,
   DialogTitle,
   TextField,
-  Divider,
+  Divider, InputLabel, Select, MenuItem
 } from "@mui/material";
 import onvoicesData from "../../assets/incoicedata.json";
 import { useNavigate, useParams } from "react-router-dom";
@@ -60,7 +60,7 @@ const ViewOrders = () => {
             },
           }
         );
-        console.log(response);
+        // console.log(response);
         setOrder(response.data.singleOrder);
         setStatus(response.data.singleOrder?.status);
 
@@ -164,12 +164,12 @@ const ViewOrders = () => {
         }
       } else if (orderStatus === "processing") {
         const processingOrderInvoice = order?.orderItem
-        .filter((item) => item.remainingQuantity > 0) // Only include items with remainingQuantity > 0
-        .map((item) => ({
-          ...item,
-          productId: item.productId._id,
-          processquantity: item.remainingQuantity, // Add processquantity only for items with remainingQuantity > 0
-        }));      
+          .filter((item) => item.remainingQuantity > 0) // Only include items with remainingQuantity > 0
+          .map((item) => ({
+            ...item,
+            productId: item.productId._id,
+            processquantity: item.remainingQuantity, // Add processquantity only for items with remainingQuantity > 0
+          }));
         console.log(processingOrderInvoice);
         const cancellationRes = await axios.post(
           `/api/processing-order`,
@@ -532,7 +532,7 @@ const ViewOrders = () => {
                 )}
                 {status === "pending" && (
                   <>
-                  <option value="">Pending</option>
+                    <option value="">Pending</option>
                     <option value="processing">Processing</option>
                     <option value="partial-processing">
                       Partial Processing
@@ -638,18 +638,27 @@ const ViewOrders = () => {
         <form onSubmit={handleConfirmUpdate}>
           <DialogContent>
             <DialogContentText>
-              Please provide a reason for cancelling the order:
+              Please select a reason for cancelling the order:
             </DialogContentText>
-            <TextField
-              autoFocus
-              required
-              margin="dense"
-              label="Cancellation Reason"
-              fullWidth
-              variant="outlined"
-              value={cancellationReason}
-              onChange={(e) => setCancellationReason(e.target.value)}
-            />
+            <FormControl fullWidth variant="outlined" margin="dense">
+              <InputLabel id="cancellation-reason-label">
+                Cancellation Reason
+              </InputLabel>
+              <Select
+                labelId="cancellation-reason-label"
+                value={cancellationReason}
+                onChange={(e) => setCancellationReason(e.target.value)}
+                required
+              >
+                <MenuItem value="Out of stock">Out of stock</MenuItem>
+                <MenuItem value="Customer request">Customer request</MenuItem>
+                <MenuItem value="Price issue">Price issue</MenuItem>
+                <MenuItem value="Partial cancellation">
+                  Partial cancellation
+                </MenuItem>
+                <MenuItem value="Other">Other</MenuItem>
+              </Select>
+            </FormControl>
           </DialogContent>
           <DialogActions>
             <Button onClick={handleCancel} color="primary">