Manque juste Modifier...

2022-10-17 23:26:48 -04:00 · 2022-10-17 23:26:48 -04:00 · df79f51411
commit df79f51411
parent 58ee7fa884
15 changed files with 716 additions and 65 deletions
--- a/GrossesMitaines/grosses-mitaines-ui/package-lock.json
+++ b/GrossesMitaines/grosses-mitaines-ui/package-lock.json
@ -11,12 +11,14 @@
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.1.3",
        "bootstrap": "^5.2.1",
        "font-awesome": "^4.7.0",
        "react": "^18.2.0",
        "react-bootstrap": "^2.5.0",
        "react-devtools": "^4.26.0",
        "react-dom": "^18.2.0",
+        "react-icons": "^4.6.0",
        "react-router-dom": "^6.4.1",
        "react-scripts": "^5.0.1",
        "react-transition-group": "^4.4.5",
@ -5128,6 +5130,29 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -14824,6 +14849,11 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "node_modules/pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@ -15230,6 +15260,14 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
      "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
    },
+    "node_modules/react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -22101,6 +22139,28 @@
      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
      "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
    },
+    "axios": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
    "axobject-query": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -28964,6 +29024,11 @@
        }
      }
    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@ -29270,6 +29335,12 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
      "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
    },
+    "react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "requires": {}
+    },
    "react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
--- a/GrossesMitaines/grosses-mitaines-ui/package.json
+++ b/GrossesMitaines/grosses-mitaines-ui/package.json
@ -6,12 +6,14 @@
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.3",
    "bootstrap": "^5.2.1",
    "font-awesome": "^4.7.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-devtools": "^4.26.0",
    "react-dom": "^18.2.0",
+    "react-icons": "^4.6.0",
    "react-router-dom": "^6.4.1",
    "react-scripts": "^5.0.1",
    "react-transition-group": "^4.4.5",
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
@ -0,0 +1,81 @@
+import { useState } from "react"
+
+const Ajouter = ({ onCreation }) => {
+
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+    const [category, setCategory] = useState("");
+    const [price, setPrice] = useState("");
+    const [quantity, setQuantity] = useState("");
+    const [imageName, setImageName] = useState("sqdc.jpg");
+
+    const handleSubmit = (e) => {
+        e.preventDefault(); // Empêcher de reloader la page au submit.
+
+        // Appeler le comportement onCreation
+        onCreation({ title, description, category, price, quantity, imageName })
+
+        // Reset les états du formulaire.
+        setTitle("")
+        setDescription("")
+        setCategory("")
+        setPrice("")
+        setQuantity("")
+        setImageName("sqdc.jpg")
+    }
+
+
+    return (
+        <div className="inventaire-form-container">
+            <form className="form-horizontal" onSubmit={handleSubmit}>
+                <h4 className="text-center">Ajouter un morceau</h4>
+                <div className="form-group">
+                    <label>Morceau: </label>
+                    <input className="form-control form-input" type='text'
+                        placeholder="Ajouter Morceau"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Description: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="description"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Categorie: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="categorie"
+                        value={category}
+                        onChange={(e) => setCategory(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Prix: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="prix"
+                        value={price}
+                        onChange={(e) => setPrice(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Quantité: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="Quantité"
+                        value={quantity}
+                        onChange={(e) => setQuantity(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Nom Image: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="nom image"
+                        value={imageName}
+                        onChange={(e) => setImageName(e.target.value)} />
+                </div>
+
+                <input className="btn-primary ajouter" type="submit" value="Ajouter Morceau"></input>
+            </form>
+        </div>
+    )
+}
+
+export default Ajouter
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
@ -6,6 +6,7 @@ import Privacy from "../pages/Privacy";
 import ContactUs from "../pages/ContactUs";
 import Morceaux from "../pages/Morceaux";
 import MorceauDetail from "../pages/MorceauDetail";
+import Inventaire from "../pages/Inventaire";

 const App = () => {

@ -19,6 +20,7 @@ const App = () => {
          <Route path="contactUs" element={<ContactUs/>}/>
          <Route path="privacy" element={<Privacy/>}/>
          <Route path="morceaux/:id" element={<MorceauDetail/>}/>
+          <Route path="inventaire" element={<Inventaire/>}/>
        </Route>
      </Routes>
    </BrowserRouter>
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Button.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Button.js
@ -0,0 +1,9 @@
+const Button = ({text, color, onClick}) => {
+    return (
+        <button className="btn" style={{backgroundColor : color}} onClick={onClick}>
+            {text}
+        </button>
+    )
+};
+
+export default Button;
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js
@ -7,28 +7,28 @@ const ContactForm = () =>{
                <div className="form-group">
                    <div className="col-md-12">
                        <label >Nom*</label>
-                        <input className="form-control contact-form-input"  />
+                        <input className="form-control form-input"  />
                        {/* <span asp-validation-for="Name" className="text-danger"></span> */}
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-md-12">
                        <label >Email*</label>
-                        <input className="form-control contact-form-input" />
+                        <input className="form-control form-input" />
                        {/* <span asp-validation-for="Email" className="text-danger"></span> */}
                    </div> 
                </div>
                <div className="form-group">
                    <div className="col-md-12">
                        <label >Téléphone*</label>
-                        <input className="form-control contact-form-input" />
+                        <input className="form-control form-input" />
                        {/* <span asp-validation-for="Phone" className="text-danger"></span> */}
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-md-12">
                        <label >Message</label>
-                        <textarea className="form-control contact-form-input" rows="3"/>
+                        <textarea className="form-control form-input" rows="3"/>
                        {/* <span asp-validation-for="Message" className="text-danger"></span> */}
                    </div>
                </div>
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js
@ -0,0 +1,22 @@
+import { FaTimes } from 'react-icons/fa'
+import { FaTools } from 'react-icons/fa'
+
+const SimpleItem = ({ item, onDelete, onModify }) => {
+    return (
+        <div className="inventaire-item">
+            <h3>
+                {item.title}
+                <div>
+                    <FaTools style={{ color: "gray", cursor: 'pointer' }}
+                        onClick={() => onModify(item.id)} />
+                    <FaTimes style={{ color: "red", cursor: 'pointer' }}
+                        onClick={() => onDelete(item.id)} />
+                </div>
+            </h3>
+            <p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}</p>
+            <p> Description: {item.description}</p>
+        </div>
+    )
+}
+
+export default SimpleItem
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItemList.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItemList.js
@ -0,0 +1,18 @@
+import SimpleItem from "./SimpleItem";
+
+const SimpleItemList = ({simpleItems, onDelete, onModify}) => {
+    return(
+        <>
+            {simpleItems.map((simpleItem) => (
+                simpleItem &&
+                <SimpleItem key={simpleItem.id}
+                            item={simpleItem}
+                            onDelete={onDelete}
+                            onModify={onModify}
+                />
+            ))}
+        </>
+    )
+}
+
+export default SimpleItemList
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
@ -3,6 +3,7 @@ import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import { Link } from "react-router-dom";
+import Dropdown from "react-bootstrap/Dropdown";


 const Topbar = () => {
@ -10,7 +11,7 @@ const Topbar = () => {
        <Navbar expand="sm" className="topbar-container">
            <Container>
                <Link className="navbar-brand" to="/">
-                    <img src="/images/LesGrossesMitaines.png" alt="" height="45"/>
+                    <img src="/images/LesGrossesMitaines.png" alt="" height="45" />
                </Link>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
@ -30,6 +31,19 @@ const Topbar = () => {
                        <Link className="nav-link" to="/privacy" >
                            Vie privée
                        </Link>
+                        <Dropdown>
+                            <Dropdown.Toggle className="dropdown-gestion">
+                                Gestion
+                            </Dropdown.Toggle>
+
+                            <Dropdown.Menu className="dropdown-gestion-menu">
+                                <Dropdown.Item>
+                                    <Link className="nav-link" to="/inventaire" >
+                                        Inventaire
+                                    </Link>
+                                </Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown>
                    </Nav>
                </Navbar.Collapse>
            </Container>
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+import Button from '../components/Button'
+import SimpleItemList from "../components/SimpleItemList";
+import Ajouter from "../components/Ajouter";
+
+const API_URL = 'https://localhost:7292/'
+const INVENTAIRE_URL = API_URL + 'api/Inventory'
+const PRODUIT_URL = API_URL + 'api/Product'
+
+const Inventaire = () => {
+
+    const [morceaux, setMorceaux] = useState([]);
+    const [isFormvisible, setFormVisibility] = useState(false);
+
+    useEffect(() => {
+        async function fetchData() {
+            const res = await axios.get(INVENTAIRE_URL);
+            setMorceaux(res.data);
+        }
+        fetchData();
+        document.title = 'Inventaire';
+    }, []);
+
+    const handleAddItem = async (morceau) => {
+        const res = await axios.post(PRODUIT_URL, morceau)
+
+        setMorceaux([...morceaux, { ...morceau, id: res.data.id }]);
+    };
+
+    const handleDeleteItem = async (id) => {
+        const res = await axios.delete(`${INVENTAIRE_URL}/${id}`)
+
+        setMorceaux(morceaux.filter((morceau) => morceau.id !== id))
+    };
+
+    const handleModifyItem = async (id) => {
+
+    };
+
+    return (
+        <div className="inventaire">
+            <header className='header'>
+                <h1>Inventaire</h1>
+                <Button
+                    text={isFormvisible ? 'Fermer' : 'Ajouter'}
+                    color={isFormvisible ? 'red' : 'purple'}
+                    onClick={() => setFormVisibility(!isFormvisible)}
+                />
+            </header>
+            {isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>}
+            {morceaux.length > 0 ?
+                (<SimpleItemList simpleItems={morceaux}
+                    onDelete={handleDeleteItem}
+                    onModify={handleModifyItem}
+                ></SimpleItemList>) :
+                ('Il n\'y a pas de morceaux!')}
+        </div>
+    );
+}
+
+export default Inventaire
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
@ -98,7 +98,7 @@ const Morceaux = (startingProducts) => {
    }

    return (
-        <>
+        <div className="morceaux">
            <div className="morceaux-container">
                <ItemList items={products} />
            </div>
@ -108,7 +108,7 @@ const Morceaux = (startingProducts) => {
                    ...
                </Button>
            </div>
-        </>
+        </div>
    );
 }

--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Privacy.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Privacy.js
@ -8,11 +8,11 @@ const Privacy = () => {
    });

    return (
-        <>
+        <div className="privacy">
            <h1 className="text-primary">Police de vie privée</h1>

-<p className="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        </>
+            <p className="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
    );
 }

--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@ -1,3 +1,7 @@
+#root {
+    height: 100vh;
+}
+
 body {
    background-image: url('/public/images/blured_wool_carpet.png');
    background-color: gray;
@ -117,7 +121,7 @@ html {
    background-color: beige;
 }

-.contact-form-input {
+.form-input {
    border: 3px solid rgba(0, 0, 0, .25);
    /* box-shadow: 1px 2px rgba(0, 0, 0, .25); */
 }
@ -206,22 +210,22 @@ html {
    text-align: center;
 }

-.item:hover{
+.item:hover {
    box-shadow: 10px 10px;
-    top:-5px;
-    left:-5px;
+    top: -5px;
+    left: -5px;
    background-color: beige;
 }

 .item {

-    border:purple double 3px;
+    border: purple double 3px;
    margin-left: 1.25%;
    margin-right: 1.25%;
    margin-bottom: 10px;
    background-color: rgba(245, 245, 220, 0.75);
    display: inline-block;
-    height:300px;
+    height: 300px;
    width: 30%;
 }

@ -229,21 +233,21 @@ html {
    padding-top: 2%;
    box-shadow: 5px 5px;
    border-radius: 2px;
-    display:block;
+    display: block;
    margin-right: auto;
    margin-left: auto;
-    height:50%;
-    width:auto;
+    height: 50%;
+    width: auto;
 }

-.item-info{
-    height:50%;
+.item-info {
+    height: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
 }

-.item-name-container{
-    height:45%;
+.item-name-container {
+    height: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
@ -251,12 +255,12 @@ html {
 }

 .item-name {
-    margin:auto;
+    margin: auto;
    height: auto;
 }

-.item-status-container{
-    height:40px;
+.item-status-container {
+    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
@ -267,7 +271,7 @@ html {
    font-weight: normal;
    font-family: 'Courier New', Courier, monospace;
    width: fit-content;
-    height:fit-content;
+    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5px;
@ -279,64 +283,64 @@ html {
    font-size: small;
 }

-.item-status-available{
-    color:green;
+.item-status-available {
+    color: green;
 }

-.item-status-backorder{
-    color:yellow;
+.item-status-backorder {
+    color: yellow;
    background-color: black;
 }

-.item-status-unavailable{
-    color:red;
+.item-status-unavailable {
+    color: red;
    background-color: black;
 }

-.item-status-clearence{
-    color:blue;
+.item-status-clearence {
+    color: blue;
    background-color: aliceblue;
    font-size: large;
    border: yellow 2px groove;
 }

-.item-status-promotion{
-    color:purple;
+.item-status-promotion {
+    color: purple;
    font-size: medium;
    background-color: aliceblue;
    border: yellow 2px groove;
 }

-.item-status-discontinued{
-    color:white;
+.item-status-discontinued {
+    color: white;
    background-color: black;
 }

-.item-price-container{
+.item-price-container {
    height: fit-content;
    width: auto;
    margin: auto;
 }

-.item-price{
-    color:green;
+.item-price {
+    color: green;
    font-weight: bold;
    font-size: large;
-    height:auto;
-    margin:auto;
+    height: auto;
+    margin: auto;
 }

-.item-old-price{
-    position:relative;
-    color:black;
+.item-old-price {
+    position: relative;
+    color: black;
    text-decoration: line-through;
    font-weight: normal;
    font-size: small;
-    height:auto;
+    height: auto;
    width: fit-content;
 }

-.item-new-price{
+.item-new-price {
    font-size: large;
    margin-left: 10px;
    font-weight: bolder;
@ -345,40 +349,114 @@ html {

 }

-.item-link, .item-link:hover{
+.item-link,
+.item-link:hover {
    color: black;
    text-decoration: none;
 }

+.btn {
+    display: inline-block;
+    background: #000;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    margin: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 15px;
+    font-family: inherit;
+}

-.btn-primary{
+.btn-primary {
    background-color: purple;
-    color:beige;
+    color: beige;
    border-color: darkslateblue;
 }

-.btn-primary:hover{
+.btn-primary:hover {
    background-color: plum !important;
    border-color: purple !important;
-    color:darkslateblue !important;
+    color: darkslateblue !important;
 }

-.btn-load-more{
+.btn-load-more {
    display: block;
-    margin-left:auto;
+    margin-left: auto;
    margin-right: auto;
-    margin-top:10px;
+    margin-top: 10px;
    margin-bottom: 10px;
-    width:85%;
+    width: 85%;
+}
+
+.privacy {
+    height: 100%;
+}
+
+.morceaux {
+    height: 100%;
+}
+
+.inventaire {
+    height: 100%;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1.25%;
+    padding: 1.25%;
+    color:purple;
+    background-color: beige;
+    border: purple solid 3px;;
+}
+
+.inventaire-form-container {
+    padding: 3% 5% 3% 5%;
+    color: black;
+    background-color: beige;
+    margin: 1.25%;
+}
+
+.inventaire-item {
+    border: purple double 3px;
+    margin-left: 1.25%;
+    margin-right: 1.25%;
+    margin-bottom: 10px;
+    background-color: rgba(245, 245, 220, 0.75);
+    display: inline-block;
+    height: auto;
+    width: 97.5%;
+}
+
+
+.inventaire-item>h3 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.dropdown-gestion,
+.dropdown-gestion:hover {
+    color: black;
+    background-color: beige !important;
+    border-color: transparent !important;
+}
+
+.dropdown-gestion-menu {
+    border: purple solid 2px;
+    background-color: beige;
 }


 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */
-@media(max-width:900px){
-    .item{
-        width:45%;
+@media(max-width:900px) {
+    .item {
+        width: 45%;
    }
 }

@ -389,8 +467,8 @@ html {

@media (max-width:450px) {

-    .item{
-        width:85%;
+    .item {
+        width: 85%;
    }

    .featured-img {
@ -425,7 +503,6 @@ html {
        width: 80%;
    }

-
    .contact-info-container {
        padding-top: 5%;
    }
@ -434,5 +511,4 @@ html {
        margin: 5px;
        padding: 10px;
    }
-
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,288 @@
+{
+  "name": "420-5DW-HY-TP",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "react-axios": "^2.0.6"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "peer": true
+    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "peer": true,
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "peer": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "peer": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-axios": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.6.tgz",
+      "integrity": "sha512-srQnLZXaW9LDJyC4/qvQ7aPi/rUpsggd3RIM5Q/vFLlQZ4l5bvPtqP/2+UeRXhJH75NfxbcPD3FkjiKONn5V8Q==",
+      "peerDependencies": {
+        "axios": "^0.27.2",
+        "prop-types": "^15.8.1",
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "peer": true
+    }
+  },
+  "dependencies": {
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "peer": true
+    },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "peer": true,
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "peer": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "peer": true
+    },
+    "follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "peer": true
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "peer": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "peer": true
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "peer": true,
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "peer": true
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "react-axios": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.6.tgz",
+      "integrity": "sha512-srQnLZXaW9LDJyC4/qvQ7aPi/rUpsggd3RIM5Q/vFLlQZ4l5bvPtqP/2+UeRXhJH75NfxbcPD3FkjiKONn5V8Q==",
+      "requires": {}
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "peer": true
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-axios": "^2.0.6"
+  }
+}