Added order status change functionality from a popup

src/shared/sections/order/all-orders/order-table-row.tsx

@@ -15,15 +15,38 @@ import Label from "../../../components/label";
 import Iconify from "../../../components/iconify";
 import { ConfirmDialog } from "../../../components/custom-dialog";
 import CustomPopover, { usePopover } from "../../../components/custom-popover";
-import { Order, OrderLine, OrderStatus, orderStatusLabels, OrderWithClientDetails, } from "@/contexts/types/main-order";
+import {
+  Order,
+  order_options,
+  OrderLine,
+  OrderStatus,
+  orderStatusLabels,
+  OrderWithClientDetails,
+} from "@/contexts/types/main-order";
 import { useGetUserById } from "@/shared/api/user";
 import { IClientItem } from "@/shared/types/user";
 import { useEffect, useState } from "react";
-import { useGetProductsByIds, useGetVariationsByIds, } from "@/shared/api/product";
-import { Avatar } from "@mui/material";
+import {
+  useGetProductsByIds,
+  useGetVariationsByIds,
+} from "@/shared/api/product";
+import {
+  Alert,
+  Avatar,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  Grid,
+  InputLabel,
+  Select,
+  Snackbar,
+} from "@mui/material";
 import { ProductType } from "@/shared/types/product";
 import { DEFAULT_IMAGE_URL } from "@/config-global";
 import giftCardImage from "@/shared/assets/giftcard.png";
+import { updateOrderStatus } from "@/shared/api/main-order";
 
 type Props = {
   row: OrderWithClientDetails;
@@ -34,6 +57,7 @@ type Props = {
   onDeleteRow: VoidFunction;
   onEditRow: VoidFunction;
   onRestoreOrder: VoidFunction;
+  onChangeStatut: (orderId: string, userId: string, statut: OrderStatus) => void;
 };
 
 export default function OrderTableRow({
@@ -45,6 +69,7 @@ export default function OrderTableRow({
   onDeleteRow,
   onEditRow,
   onRestoreOrder,
+  onChangeStatut,
 }: Props) {
   const {
     orderLines,
@@ -120,6 +145,29 @@ export default function OrderTableRow({
     return "https://mydressin-rec.s3.eu-west-3.amazonaws.com/Image-not-found.png";
   };
 
+  const [openDialog, setOpenDialog] = useState(false);
+  const [statut, setStatut] = useState<OrderStatus>(status);
+  const handleOpenDialog = () => {
+    if(status !== OrderStatus.DELETED){
+      setOpenDialog(true);
+    }
+  };
+
+  const handleCloseDialog = () => {
+    setOpenDialog(false);
+  };
+
+  const handleChangeStatut = async () => {
+    try {
+      const userId = localStorage.getItem("userId") || "";
+      onChangeStatut(id, userId, statut);
+    } catch (error) {
+      console.error("Erreur lors de la mise à jour du statut :", error);
+    } finally {
+      handleCloseDialog();
+    }
+  };
+
   const renderPrimary = (
     <TableRow hover selected={selected}>
       <TableCell padding="checkbox">
@@ -171,6 +219,7 @@ export default function OrderTableRow({
 
       <TableCell>
         <Label
+          onClick={handleOpenDialog}
           variant="soft"
           color={
             (status === OrderStatus.FINISHED && "success") ||
@@ -413,6 +462,40 @@ export default function OrderTableRow({
           </Button>
         }
       />
+      <Dialog
+        open={openDialog}
+        onClose={handleCloseDialog}
+        maxWidth="sm"
+        fullWidth
+      >
+        <DialogTitle>Modifier le Statut</DialogTitle>
+        <DialogContent>
+          <Box sx={{ width: "400px", margin: "auto", marginTop: "12px" }}>
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <FormControl fullWidth>
+                  <Select
+                    value={statut}
+                    onChange={(e) => setStatut(e.target.value as OrderStatus)}
+                  >
+                    {Object.values(OrderStatus).map((status) => (
+                      <MenuItem key={status} value={status}>
+                        {order_options[status]}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialog}>Annuler</Button>
+          <Button color="primary" onClick={handleChangeStatut}>
+            Enregistrer
+          </Button>
+        </DialogActions>
+      </Dialog>
     </>
   );
 }

src/shared/sections/order/view/order-list-view.tsx

@@ -194,6 +194,21 @@ export default function OrderListView() {
     },
     [dataInPage.length, enqueueSnackbar, table, tableData]
   );
+  const handleChangeStatut = async (orderId: string, userId: string, statut: OrderStatus) => {
+    try {
+      await updateOrderStatus(orderId, userId, statut);
+      setSnackbarMessage("Statut mis à jour avec succès !");
+      setSnackbarSeverity("success");
+      setSnackbarOpen(true);
+      revalidate();
+    } catch (error) {
+      setSnackbarMessage("Erreur lors de la mise à jour du statut.");
+      setSnackbarSeverity("error");
+      setSnackbarOpen(true);
+      console.error("Erreur lors de la mise à jour du statut :", error);
+    }
+  };
+
 
   const handleTrashOrder = useCallback(
     async (id: string) => {
@@ -509,6 +524,7 @@ export default function OrderListView() {
                               onRestoreOrder={() => {
                                 restoreOrder(row.id);
                               }}
+                              onChangeStatut={(orderId, userId, statut) => handleChangeStatut(orderId, userId, statut)}
                             />
                           ))
                       )}