Merge branch 'feature/MYD-101' into 'develop'

MYD-101/Some updated files

See merge request !89

src/shared/sections/order/add-edit-order/order-edit-view.tsx

 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   Grid,
   Card,
   CardHeader,
   Stack,
-  InputAdornment,
-  FormControlLabel,
-  Switch,
-  Chip,
-  Divider,
   Typography,
   TextField,
-  Select,
-  MenuItem,
   Autocomplete,
   IconButton,
   TableContainer,
@@ -24,22 +17,14 @@ import {
   TableBody,
   Paper,
   Button,
-  styled,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
   Tooltip,
   Alert,
-  AlertTitle,
   Box,
 } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import CustomBreadcrumbs from "@/components/custom-breadcrumbs/custom-breadcrumbs";
 import { paths } from "@/routes/paths";
 import { LocalizationProvider } from "@mui/x-date-pickers";
-import DialogActions from "@mui/material/DialogActions";
-import ProductForm from "../productForm";
 import { useForm, SubmitHandler, Controller } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as Yup from "yup";
@@ -62,6 +47,7 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
     "Supprimée",
   ];
   const note = ["privée", "au client"];
+  const motif = ["En rupture du stock", "Retour client"];
   const clients = ["client 1"];
 
   const isOrderCompleted = OrderStatus.some(
@@ -76,15 +62,6 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
   ) {
     return { Article, Coût, Qte, Total };
   }
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
   const validationSchema = Yup.object().shape({
     etat: Yup.string().required("État est requis"),
     client: Yup.string().required("Client est requis"),
@@ -101,24 +78,41 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
     createData("Article 1", 19, 2, 38),
     createData("Article 2", 15, 1, 15),
   ]);
-  
+
   const handleRefundClick = () => {
     setIsRefundClicked(true);
     setIsCancelClicked(false);
   };
-  
+
   const handleRefund = () => {
     console.log("Remboursement effectué avec succès !");
     setRefundAmount("");
     setRefundReason("");
     setIsRefundClicked(false);
   };
-  
+
   const [isRefundClicked, setIsRefundClicked] = useState(false);
   const [isCancelClicked, setIsCancelClicked] = useState(false);
   const [refundAmount, setRefundAmount] = useState("");
   const [refundReason, setRefundReason] = useState("");
+  const [subtotal, setSubtotal] = useState(0);
+  const [total, setTotal] = useState(0);
+  const [vat, setVat] = useState(0);
   
+  useEffect(() => {
+    const calculateTotals = () => {
+      const subtotal = orderItems.reduce((acc, item) => acc + item.Total, 0);
+      const vat = subtotal * 0.2; 
+      const total = subtotal + vat;
+
+      setSubtotal(subtotal);
+      setVat(vat);
+      setTotal(total);
+    };
+
+    calculateTotals();
+  }, [orderItems]);
+
 
   const handleCancelClick = () => {
     setIsCancelClicked(true);
@@ -126,14 +120,21 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
     setRefundAmount("");
     setRefundReason("");
   };
+  const formRef = useRef<HTMLFormElement>(null);
+  const [prevQuantities, setPrevQuantities] = useState(
+    orderItems.map((item) => item.Qte)
+  );
 
-  
   const handleQuantityChange = (index: number, value: string) => {
     const newOrderItems = [...orderItems];
-    newOrderItems[index].Qte = Number(value);
-    setOrderItems(newOrderItems);
+    const newValue = Number(value);
+    if (newValue <= prevQuantities[index]) {
+      newOrderItems[index].Qte = newValue;
+      newOrderItems[index].Total = newOrderItems[index].Coût * newValue;
+      setOrderItems(newOrderItems);
+    }
   };
-  
+ 
 
   return (
     <>
@@ -163,11 +164,15 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
           justifyContent="flex-end"
           style={{ marginBottom: "16px" }}
         >
-          <LoadingButton type="submit" variant="contained">
+          <LoadingButton
+            type="button"
+            variant="contained"
+            onClick={() => formRef.current?.submit()}
+          >
             Modifier la commande
           </LoadingButton>
         </Grid>
-        <form onSubmit={handleSubmit(onSubmit)}>
+        <form ref={formRef} onSubmit={handleSubmit(onSubmit)}>
           <Grid container spacing={3}>
             <Grid item xs={12} md={8}>
               <Card>
@@ -388,10 +393,13 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
                   </TableContainer>
 
                   <Typography variant="subtitle2" align="right">
-                    Sous-total des articles: 0,00€
+                    Sous-total des articles: {subtotal.toFixed(2)}€
                   </Typography>
                   <Typography variant="subtitle2" align="right">
-                    Total de la commande : 0,00€
+                    TVA 20%: {vat.toFixed(2)}€
+                  </Typography>
+                  <Typography variant="subtitle2" align="right">
+                    Total de la commande : {total.toFixed(2)}€
                   </Typography>
                   {isRefundClicked && !isCancelClicked && (
                     <Box>
@@ -418,13 +426,27 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
                             margin="normal"
                           />
                         </Grid>
-                        <Grid item xs={12}>
-                          <TextField
-                            label="Motif du remboursement (facultatif)"
-                            value={refundReason}
-                            onChange={(e) => setRefundReason(e.target.value)}
-                            fullWidth={true}
-                            margin="normal"
+
+                        <Grid
+                          item
+                          xs={12}
+                          sx={{
+                            justifyContent: "flex-end",
+                            alignItems: "flex-end",
+                            width: "25%",
+                          }}
+                        >
+                          <Autocomplete
+                            id="combo-box-demo"
+                            options={motif}
+                            sx={{ marginBottom: 2 }}
+                            renderInput={(params) => (
+                              <TextField
+                                {...params}
+                                label="Motif du remboursement"
+                                variant="outlined"
+                              />
+                            )}
                           />
                         </Grid>
                       </Grid>
@@ -439,10 +461,25 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
                         <Button variant="contained" onClick={handleCancelClick}>
                           Annuler
                         </Button>
-
-                        <Button variant="contained" onClick={handleRefund}>
-                          Rembourser {refundAmount} € manuellement
-                        </Button>
+                        <Grid
+                          container
+                          spacing={2}
+                          sx={{
+                            display: "flex",
+                            justifyContent: "flex-end",
+                          }}
+                        >
+                          <Grid item>
+                            <Button variant="contained" onClick={handleRefund}>
+                              Rembourser par paypal
+                            </Button>
+                          </Grid>
+                          <Grid item>
+                            <Button variant="contained" onClick={handleRefund}>
+                              Rembourser {refundAmount} € manuellement
+                            </Button>
+                          </Grid>
+                        </Grid>
                       </Grid>
                     </Box>
                   )}
@@ -518,6 +555,116 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
                   </Grid>
                 </Stack>
               </Card>
+              <Card
+                sx={{
+                  marginBottom: 2,
+                }}
+              >
+                <CardHeader
+                  title="Mondial Relay - InPost"
+                  titleTypographyProps={{
+                    fontSize: "16px",
+                    fontWeight: "bold",
+                  }}
+                />
+                <Stack spacing={0} sx={{ p: 2 }}>
+                  <Grid container spacing={2} alignItems="center">
+                    <Grid item xs={12}>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          justifyContent: "space-between",
+                          padding: "8px 16px",
+                          borderBottom: "1px solid #e0e0e0",
+                          backgroundColor: "rgba(245, 245, 245, 0.8)",
+                        }}
+                      >
+                        <Typography
+                          variant="body2"
+                          sx={{ fontWeight: "bold", color: "#6b7280" }}
+                        >
+                          Expédition
+                        </Typography>
+                        <Typography
+                          variant="body2"
+                          sx={{ fontWeight: "bold", color: "#6b7280" }}
+                        >
+                          96850225
+                        </Typography>
+                      </Box>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          justifyContent: "space-between",
+                          padding: "8px 16px",
+                          borderBottom: "1px solid #e0e0e0",
+                          backgroundColor: "#f9f9f9",
+                        }}
+                      >
+                        <Typography
+                          variant="body2"
+                          sx={{ fontWeight: "bold", color: "#6b7280" }}
+                        >
+                          Point Relais ou Locker
+                        </Typography>
+                        <Typography
+                          variant="body2"
+                          sx={{ fontWeight: "bold", color: "#6b7280" }}
+                        >
+                          FR-000363
+                        </Typography>
+                      </Box>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          justifyContent: "space-between",
+                          padding: "8px 16px",
+                          backgroundColor: "rgba(245, 245, 245, 0.8)",
+                        }}
+                      >
+                        <Typography
+                          variant="body2"
+                          sx={{ fontWeight: "bold", color: "#6b7280" }}
+                        >
+                          Statut
+                        </Typography>
+                        <Typography
+                          variant="body2"
+                          sx={{ fontWeight: "bold", color: "#6b7280" }}
+                        >
+                          Colis enregistré
+                        </Typography>
+                      </Box>
+                    </Grid>
+                    <Grid item xs={12} container justifyContent="center">
+                      <Grid item xs={10}>
+                        <Button
+                          fullWidth
+                          variant="contained"
+                          sx={{ marginBottom: 1, backgroundColor: "#00C853" }}
+                        >
+                          ÉTIQUETTE A4
+                        </Button>
+                        <Button
+                          fullWidth
+                          variant="contained"
+                          sx={{ marginBottom: 1, backgroundColor: "#00C853" }}
+                        >
+                          ÉTIQUETTE A5
+                        </Button>
+                        <Button
+                          fullWidth
+                          variant="contained"
+                          sx={{ marginBottom: 1, backgroundColor: "#00C853" }}
+                        >
+                          ÉTIQUETTE 10X15
+                        </Button>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Stack>
+              </Card>
+
               <Card sx={{ marginBottom: 2 }}>
                 <CardHeader title="Historique du client" />
                 <Stack spacing={3} sx={{ p: 3 }}>
@@ -573,6 +720,7 @@ export default function OrderEditView({ id }: OrderEditViewProps) {
               </Card>
             </Grid>
           </Grid>
+          s
         </form>
       </LocalizationProvider>
     </>

src/shared/sections/order/order-deleted-row.tsx

@@ -230,11 +230,11 @@ export default function OrderDeletedTableRow({
       <ConfirmDialog
         open={confirm.value}
         onClose={confirm.onFalse}
-        title="Mettre à la corbeille"
-        content="Etes-vous sûr de vouloir le mettre à la corbeille?"
+        title="supprimer définitivement la commande"
+        content="Etes-vous sûr de vouloir supprimer définitivement la commande?"
         action={
           <Button variant="contained" color="error" onClick={onDeleteRow}>
-            Mettre à la corbeille
+           supprimer définitivement la commande
           </Button>
         }
       />

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

@@ -21,7 +21,7 @@ import { useBoolean } from "../../../hooks/use-boolean";
 
 import { isAfter, isBetween } from "../../../utils/format-time";
 
-import { _orders, ORDER_STATUS_OPTIONS, OrderStatus } from "../../_mock";
+import { _orders, OrderStatus } from "../../_mock";
 
 import Label from "../../components/label";
 import Iconify from "../../../components/iconify";
@@ -49,7 +49,6 @@ import {
 } from "../../types/order";
 
 import OrderTableFiltersResult from "./all-orders/order-table-filters-result";
-import { Grid } from "@mui/material";
 import OrderDeletedTableRow from "./order-deleted-row";
 import OrderDeletedToolbar from "./order-deleted-toolbar";
 import { Recycling } from "@mui/icons-material";
@@ -284,7 +283,7 @@ export default function OrderListDeleted() {
               }
               action={
                 <>
-                <Tooltip title="Mettre à la corbeille">
+                <Tooltip title="supprimer">
                   <IconButton color="primary" onClick={confirm.onTrue}>
                     <Iconify icon="solar:trash-bin-trash-bold" />
                   </IconButton>
@@ -367,10 +366,10 @@ export default function OrderListDeleted() {
       <ConfirmDialog
         open={confirm.value}
         onClose={confirm.onFalse}
-        title="Mettre à la corbeille"
+        title="supprimer définitivement la commande"
         content={
           <>
-            Are you sure want to put <strong> {table.selected.length} </strong>{" "}
+            Are you sure want to delete<strong> {table.selected.length} </strong>{" "}
             items to the wastepaper basket?
           </>
         }
@@ -383,7 +382,7 @@ export default function OrderListDeleted() {
               confirm.onFalse();
             }}
           >
-            Mettre à la corbeille
+           supprimer définitivement la commande
           </Button>
         }
       />

src/shared/sections/order/statistics/statistics-filters.tsx

@@ -35,12 +35,21 @@ export default function OrderFilters({
 }: Props) {
   const [isDateRangeOpen, setIsDateRangeOpen] = useState(false);
   const [selectAll, setSelectAll] = useState(true);
+  const OrderSource = _orders.map((order) => order.origine);
+  const [filterByRefund, setFilterByRefund] = useState("");
   const [compareOptions, setCompareOptions] = useState({
     previousPeriod: false,
     previousYear: false,
   });
-  const OrderSource = _orders.map((order) => order.origine);
-  const [filterByRefund, setFilterByRefund] = useState(false);
+
+  const handleChange = (event:any) => {
+    const { value } = event.target;
+    setFilterByRefund(value);
+    setCompareOptions({
+      previousPeriod: value === "period",
+      previousYear: value === "date",
+    });
+  };
 
   useEffect(() => {
     setSelectAll(selectedOrders.length === OrderSource.length);
@@ -139,15 +148,8 @@ export default function OrderFilters({
       <FormControl sx={{ m: 1, width: 300 }}>
         <InputLabel>Remboursement</InputLabel>
         <Select
-          value={filterByRefund ? "period" : ""}
-          onChange={(event) => {
-            const { value } = event.target;
-            setFilterByRefund(value === "period");
-            setCompareOptions({
-              previousPeriod: value === "period",
-              previousYear: value === "date",
-            });
-          }}
+          value={filterByRefund}
+          onChange={handleChange}
           input={<OutlinedInput sx={{ height: 50 }} label="Remboursement" />}
         >
           <MenuItem value="period">selon la période en cours</MenuItem>

src/shared/sections/user/all-users/user-table-row.tsx

+import React, { useState } from "react";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
@@ -6,6 +7,7 @@ import Checkbox from "@mui/material/Checkbox";
 import TableCell from "@mui/material/TableCell";
 import IconButton from "@mui/material/IconButton";
 import ListItemText from "@mui/material/ListItemText";
+import Avatar from "@mui/material/Avatar";
 
 import { useBoolean } from "@/hooks/use-boolean";
 
@@ -19,7 +21,6 @@ import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 
 import UserQuickEditForm from "./user-quick-edit-form";
 import { _roles } from "@/shared/_mock";
-import { Avatar } from "@mui/material";
 
 // ----------------------------------------------------------------------
 
@@ -41,11 +42,16 @@ export default function UserTableRow({
   const { name, avatarUrl, loginActivity, status, email, pseudo, role } = row;
 
   const confirm = useBoolean();
-
   const quickEdit = useBoolean();
-
   const popover = usePopover();
 
+  const [userLoginActivity, setUserLoginActivity] = useState(loginActivity);
+
+  const handleLogout = () => {
+    setUserLoginActivity("offline");
+    popover.onClose();
+  };
+
   return (
     <>
       <TableRow hover selected={selected}>
@@ -56,9 +62,9 @@ export default function UserTableRow({
         <TableCell sx={{ whiteSpace: "nowrap" }}>
           <Label
             variant="soft"
-            color={(loginActivity === "online" && "success") || "default"}
+            color={(userLoginActivity === "online" && "success") || "default"}
           >
-            {loginActivity}
+            {userLoginActivity}
           </Label>
         </TableCell>
 
@@ -145,8 +151,8 @@ export default function UserTableRow({
           <Iconify icon="solar:pen-bold" />
           Edit
         </MenuItem>
-        {loginActivity === "online" && (
-          <MenuItem>
+        {userLoginActivity === "online" && (
+          <MenuItem onClick={handleLogout}>
             <ExitToAppIcon />
             Logout
           </MenuItem>