diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js
index c8ff940..4b21cbe 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js
@@ -1,4 +1,7 @@
-const InvoiceItem = ({ invoice }) => {
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const InvoiceItem = ({ invoice, onCancel }) => {
 
     const productTotal = (p) => {
         return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price))
@@ -79,7 +82,6 @@ const InvoiceItem = ({ invoice }) => {
         }
     }
 
-
     return (
 
         <div className="invoice-item-container">
@@ -101,7 +103,11 @@ const InvoiceItem = ({ invoice }) => {
                 </div>
             </div>
             <div className="invoice-item-products">
-                <h4>Produits</h4>
+                <div className="invoice-product-delete">
+                    <h4 className='simple-item-title' >Produits</h4>
+                    <h1 className='simple-item-buttons'><FontAwesomeIcon icon={faTimes} className='btn-effacer-morceau' style={{ color: "red", cursor: 'pointer', margin: 'auto'}}
+                        onClick={() => onCancel(invoice.id)} /></h1>
+                </div>
                 <ul className="invoice-item-product-list">
                     {invoice.products.map((p) => (
                         <li key={p.id}>{p.quantity} x {p.product.title} <br /> <b>{productTotal(p).toFixed(2)} $ CA</b></li>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js
index 636d947..d2de763 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js
@@ -1,12 +1,13 @@
 import InvoiceItem from "./InvoiceItem";
 
-const InvoiceList = ({ invoices }) => {
+const InvoiceList = ({ invoices, onCancel }) => {
     return (
         <div className="invoice-list-container">
             {invoices.map((invoice) => (
                 <InvoiceItem
                     key={invoice.id}
                     invoice={invoice}
+                    onCancel={onCancel}
                 />
             ))}
         </div>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js
index be03c7e..7274ec6 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js
@@ -1,11 +1,19 @@
 import { useEffect } from "react";
 import { useState } from "react";
 import InvoiceList from "../components/InvoiceList";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 
 const Invoices = () => {
 
     const [invoices, setInvoices] = useState([]);
 
+    const mySwal = withReactContent(Swal);
+
+    const [alertTitle, setAlertTitle] = useState("");
+    const [alertMessage, setAlertMessage] = useState("");
+    const [showAlert, setShowAlert] = useState(false);
+
     useEffect(() => {
         fetch(`https://localhost:7292/api/Invoice?all=true`, {
             method: 'GET',
@@ -23,10 +31,57 @@ const Invoices = () => {
         });
     }, []);
 
+    const handleCancelInvoice = async (id) => {
+
+        mySwal.fire({
+            title: `Effacer la commande?`,
+            text: 'Êtes-vous certain de vouloir effacer cette commande (cette action est irréversible)?',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Oui',
+            cancelButtonText: 'Non',
+        }).then(async (result) => {
+            if (result.isConfirmed) {
+                fetch(`https://localhost:7292/api/Invoice?id=${id}`, {
+                    method: 'CANCEL',
+                    mode: 'cors',
+                    credentials: 'include'
+                }).then(async (response) => {
+                    console.log(response);
+                    if (response.ok) {
+                        const deletedId = await response.json();
+                        setInvoices(invoices.filter((invoice) => invoice.id !== deletedId));
+
+                        onShowAlert('Suppression de la commande avec succès!', 2000);
+                    }
+                    else {
+                        console.log("test");
+                        mySwal.fire({
+                            title: `Erreur lors de la suppression de la commande...`,
+                            text: `L'erreur: ${response}`,
+                            icon: 'error',
+                        });
+                    }
+                });
+            }
+        })
+
+    };
+
+    const onShowAlert = (title, message, time) => {
+
+        setAlertTitle(title);
+        setAlertMessage(message);
+        setShowAlert(true);
+
+        window.setTimeout(() => { setShowAlert(false); }, time);
+    }
+
     return (
         <>
             <InvoiceList
                 invoices={invoices}
+                onCancel={handleCancelInvoice}
             />
         </>
     );
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/MyInvoices.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/MyInvoices.js
index ab961fb..0689365 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/MyInvoices.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/MyInvoices.js
@@ -1,11 +1,19 @@
 import { useEffect } from "react";
 import { useState } from "react";
 import InvoiceList from "../components/InvoiceList";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 
 const MyInvoices = () => {
 
     const [invoices, setInvoices] = useState([]);
+    
+    const mySwal = withReactContent(Swal);
 
+    const [alertTitle, setAlertTitle] = useState("");
+    const [alertMessage, setAlertMessage] = useState("");
+    const [showAlert, setShowAlert] = useState(false);
+    
     useEffect(() => {
         fetch(`https://localhost:7292/api/Invoice`, {
             method: 'GET',
@@ -23,10 +31,59 @@ const MyInvoices = () => {
         });
     }, []);
 
+    const handleCancelInvoice = async (id) => {
+
+        mySwal.fire({
+            title: `Effacer la commande?`,
+            text: 'Êtes-vous certain de vouloir effacer cette commande (cette action est irréversible)?',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Oui',
+            cancelButtonText: 'Non',
+        }).then(async (result) => {
+            if (result.isConfirmed) {
+                fetch(`https://localhost:7292/api/Invoice?id=${id}`, {
+                    method: 'CANCEL',
+                    mode: 'cors',
+                    credentials: 'include'
+                }).then(async (response) => {
+                    console.log(response);
+                    if (response.ok) {
+                        const deletedId = await response.json();
+                        setInvoices(invoices.filter((invoice) => invoice.id !== deletedId));
+
+                        onShowAlert('Suppression de la commande avec succès!', 2000);
+                    }
+                    else {
+                        console.log("test");
+                        mySwal.fire({
+                            title: `Erreur lors de la suppression de la commande...`,
+                            text: `L'erreur: ${response}`,
+                            icon: 'error',
+                        });
+                    }
+                });
+            }
+        })
+
+    };
+
+    const onShowAlert = (title, message, time) => {
+
+        setAlertTitle(title);
+        setAlertMessage(message);
+        setShowAlert(true);
+
+        window.setTimeout(() => { setShowAlert(false); }, time);
+    }
+
+
+
     return (
         <>
             <InvoiceList
                 invoices={invoices}
+                onCancel={handleCancelInvoice}
             />
         </>
     );
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 64d7752..d82ca7e 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -791,6 +791,10 @@ a {
     margin-bottom: 2px;
 }
 
+.invoice-product-delete {
+    display: flex;
+}
+
 .invoice-item-expedition {}
 
 .invoice-item-product-list {}