lekkie poprawki

firm/package-lock.json

@@ -11,14 +11,15 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "axios": "^1.6.8",
+        "axios": "^1.7.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.23.0",
+        "react-router-dom": "^6.23.1",
         "react-scripts": "^5.0.1",
         "react-select": "^5.8.0",
         "tailwindcss": "^3.4.3",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "yup": "^1.4.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3464,9 +3465,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.16.0",
+      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
-      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -5559,9 +5560,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.8",
+      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -14941,6 +14942,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -15320,11 +15326,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.23.0",
+      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
-      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
       "dependencies": {
-        "@remix-run/router": "1.16.0"
+        "@remix-run/router": "1.16.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -15334,12 +15340,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.23.0",
+      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
-      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
       "dependencies": {
-        "@remix-run/router": "1.16.0",
+        "@remix-run/router": "1.16.1",
-        "react-router": "6.23.0"
+        "react-router": "6.23.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -17212,6 +17218,11 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -17244,6 +17255,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@@ -18718,6 +18734,28 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz",
+      "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   }
 }

firm/package.json

@@ -13,7 +13,8 @@
     "react-scripts": "^5.0.1",
     "react-select": "^5.8.0",
     "tailwindcss": "^3.4.3",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

firm/src/components/Raporty.js

@@ -5,6 +5,7 @@ import koszIcon from "../icons/kosz.png";
 const Raporty = () => {
   const [fromDate, setFromDate] = useState('');
   const [toDate, setToDate] = useState('');
+  const [error, setError] = useState(null);
   const [reports, setReports] = useState([]);
 
   const fetchReports = async () => {
@@ -21,7 +22,12 @@ const Raporty = () => {
   }, []);
 
   const handleGenerateReport = async () => {
+    if (!fromDate || !toDate) {
+      setError('Proszę uzupełnić wszystkie pola.');
+      return;
+    }
     try {
+      console.log('Wysyłane dane:', fromDate, toDate);
       const response = await axios.post('https://localhost:7039/api/Report', {
         fromDate,
         toDate
@@ -58,10 +64,10 @@ const Raporty = () => {
       </div>
       <div className="mt-5">
         <label htmlFor="fromDate" className="mr-3">Od:</label>
-        <input type="date" id="fromDate" value={fromDate} onChange={(e) => setFromDate(e.target.value)} className="mr-5" />
+        <input type="datetime-local" id="fromDate" value={fromDate} onChange={(e) => setFromDate(e.target.value)} className="mr-5" />
         <label htmlFor="toDate" className="mr-3">Do:</label>
-        <input type="date" id="toDate" value={toDate} onChange={(e) => setToDate(e.target.value)} className="mr-5" />
+        <input type="datetime-local" id="toDate" value={toDate} onChange={(e) => setToDate(e.target.value)} className="mr-5" />
-        <button onClick={handleGenerateReport} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Generuj</button>
+        <button onClick={() =>{handleGenerateReport(); console.log()}} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Generuj</button>
       </div>
       <div className="mt-5">
         <h2 className="text-2xl font-bold mb-4">Raporty</h2>
@@ -95,6 +101,17 @@ const Raporty = () => {
           </tbody>
         </table>
       </div>
+      {error && (
+        <div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+        <div className="bg-white p-8 rounded-lg">
+        <h2 className="text-2xl font-bold mb-4">Błąd</h2>
+        <p>{error}</p>
+        <button onClick={() => window.location.reload()} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
+        Zamknij
+        </button>
+        </div>
+        </div>
+      )}
     </div>
   );
 };

firm/src/components/Transakcje.js

@@ -57,6 +57,10 @@ const Transakcje = () => {
   }, []);
 
   const handleAddTransaction = async () => {
+    if (!newTransaction.date || !newTransaction.employeeId || newTransaction.transactionProducts.some(product => !product.productName || !product.quantity)) {
+      setError('Proszę uzupełnić wszystkie pola.');
+      return;
+    }
     try {
       console.log('Nowa transakcja:', newTransaction);
       await axios.post('https://localhost:7039/api/Transaction', newTransaction);
@@ -91,12 +95,14 @@ const Transakcje = () => {
     }
   };
 
-
   const formatDate = (dateString) => {
     const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
     const date = new Date(dateString);
     return date.toLocaleDateString('pl-PL', options).replace(",", "");
   };
+  const formatPrice = (price) => {
+    return parseFloat(price).toFixed(2);
+  };
 
   const handleAddProduct = () => {
     setNewTransaction({
@@ -139,6 +145,11 @@ const Transakcje = () => {
         setIsEditModalOpen(true);
         return;
       }
+      if (!editTransaction.date || !editTransaction.employeeId || editTransaction.transactionProducts.some(product => !product.productName || !product.quantity) || !editTransaction.paymentType
+            || !editTransaction.description || !editTransaction.discount ) {
+        setError('Proszę uzupełnić wszystkie pola.');
+        return;
+      }
       await axios.put(`https://localhost:7039/api/Transaction/${editTransaction.id}`, editTransaction);
       fetchTransactions();
       setIsEditModalOpen(false); 
@@ -203,7 +214,7 @@ const Transakcje = () => {
         </div>
       )}
       {isEditModalOpen && editTransaction && (
-      <div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="absolute top-0 left-0 w-full h-screen bg-black bg-opacity-50 flex items-center justify-center">
     <div className="bg-white p-8 rounded-lg">
       <h2 className="text-2xl font-bold mb-4">Edytuj transakcję</h2>
       <input
@@ -214,6 +225,7 @@ const Transakcje = () => {
         placeholder="Data"
         className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
       />
+      Numer Pracownika
       <input
         type="number"
         name="employeeId"
@@ -230,7 +242,9 @@ const Transakcje = () => {
           onChange={(selectedOption) => handleEditProductChange(index, selectedOption)}
           options={products}
           className="block w-full mb-4"
+          placeholder="Wybierz produkt..."
           />
+          Ilość
           <input
             type="number"
             name={`quantity-${index}`}
@@ -253,6 +267,7 @@ const Transakcje = () => {
         placeholder="Sposób płatności"
         className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
       />
+      Zniżka
       <input
         type="number"
         name="discount"
@@ -316,6 +331,7 @@ const Transakcje = () => {
                   onChange={(selectedOption) => handleProductChange(index, selectedOption)}
                   options={products}
                   className="block w-full mb-4"
+                  placeholder="Wybierz produkt..."
                   />
                 <input
                   type="number"
@@ -328,12 +344,12 @@ const Transakcje = () => {
                   }}
                   placeholder="Ilość"  className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
                   />
-                  <button onClick={() => handleRemoveProduct(index)} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
+                  <button onClick={() => handleRemoveProduct(index)} className="bg-red-500 hover:bg-red-700 text-white font-bold my-2 py-2 px-4 rounded">
                     Usuń
                   </button>
                 </div>
               ))}
-              <button onClick={handleAddProduct} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+              <button onClick={handleAddProduct} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 my-3 rounded">
                 Dodaj
               </button>
               <input
@@ -372,7 +388,7 @@ const Transakcje = () => {
               </button>
               <button
                 onClick={() => setIsModalOpen(false)}
-                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 mx-1 rounded"
               >
                 Anuluj
               </button>
@@ -410,10 +426,13 @@ const Transakcje = () => {
                         <div key={product.id}>{product.quantity}</div>
                       ))}
                     </td>
-                    <td className="border border-gray-300 p-2">{transaction.totalPrice}</td>
+                    <td className="border border-gray-300 p-2">{formatPrice(transaction.totalPrice)}</td>
                     <td className="border border-gray-300 p-2">{transaction.paymentType}</td>
                     <td className="border border-gray-300 p-2">{transaction.employeeId}</td>
-                    <td className="border border-gray-300 p-2"><button  onClick={() => handleEditTransaction(transaction)}
+                    <td className="border border-gray-300 p-2"><button  onClick={() =>{handleEditTransaction(transaction);
+                      console.log(transaction);
+                    }
+                        }
                         className="mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex">
                         <img src={editIcon} alt="" className="w-8 h-8 mr-2" />Edytuj
                         </button></td>

firm/src/components/Wydatki.js

@@ -6,6 +6,7 @@ import plusIcon from "../icons/plus.png";
 const Wydatki = () => {
   const [expenses, setExpenses] = useState([]);
   const [showModal, setShowModal] = useState(false);
+  const [error, setError] = useState(null);
   const [newExpense, setNewExpense] = useState({
     date: '',
     value: '',
@@ -26,6 +27,10 @@ const Wydatki = () => {
   }, []);
 
   const handleAddExpense = async () => {
+    if (!newExpense.date || !newExpense.value || !newExpense.description) {
+      setError('Proszę uzupełnić wszystkie pola.');
+      return;
+    }
     try {
       const response = await axios.post('https://localhost:7039/api/Expenses', newExpense);
       const addedExpense = response.data;
@@ -58,16 +63,13 @@ const Wydatki = () => {
 
   return (
     <div className="p-10 ml-11">
-      <div className="flex items-center justify-between">
-        <div className="h-20 text-5xl ml-1">
-          Zarządzanie wydatkami
-        </div>
-      </div>
 
       <div className="mt-5">
-        <div className="flex justify-between items-center"> 
+      <div className='flex items-center justify-between'>
-        <h2 className="text-2xl font-bold mb-4">Wydatki</h2>
+        <div className='h-20 text-5xl ml-1'>
-        <button onClick={() => setShowModal(true)} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
+          Wydatki
+        </div>
+        <button onClick={() => setShowModal(true)} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded flex">
           <img src={plusIcon} alt="" className="w-8 h-8 mr-2" />Dodaj
         </button>
       </div>
@@ -111,7 +113,7 @@ const Wydatki = () => {
                 <div className="grid grid-cols-6 gap-6">
                   <div className="col-span-6 sm:col-span-3">
                     <label htmlFor="expenseDate" className="block text-sm font-medium text-gray-700">Data</label>
-                    <input type="date" id="expenseDate" value={newExpense.date} onChange={(e) => setNewExpense({ ...newExpense, date: e.target.value })} className="mt-1 border py-1 px-3 block w-full shadow-sm sm:text-sm rounded-md" />
+                    <input type="datetime-local" id="expenseDate" value={newExpense.date} onChange={(e) => setNewExpense({ ...newExpense, date: e.target.value })} className="mt-1 border py-1 px-3 block w-full shadow-sm sm:text-sm rounded-md" />
                   </div>
 
                   <div className="col-span-6 sm:col-span-3">
@@ -127,7 +129,7 @@ const Wydatki = () => {
                 </div>
               </div>
               <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                <button onClick={handleAddExpense} type="button" className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
+                <button onClick={() => {handleAddExpense();setShowModal(false);}} type="button" className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                 Dodaj
                 </button>
                 <button onClick={() => setShowModal(false)} type="button" className="mt-3 sm:mt-0 mr-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
@@ -138,6 +140,17 @@ const Wydatki = () => {
           </div>
         </div>
       )}
+        {error && (
+        <div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+        <div className="bg-white p-8 rounded-lg">
+        <h2 className="text-2xl font-bold mb-4">Błąd</h2>
+        <p>{error}</p>
+        <button onClick={() => window.location.reload()} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
+        Zamknij
+        </button>
+        </div>
+        </div>
+      )}
     </div>
   );
 };

firm/src/components/ZarzadzanieProduktami.js

@@ -9,6 +9,7 @@ const ZarzadzanieProduktami = () => {
   const [products, setProducts] = useState([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [error, setError] = useState(null);
   const [deleteProductId, setDeleteProductId] = useState(null);
   const [newProduct, setNewProduct] = useState({
     name: "",
@@ -38,6 +39,10 @@ const ZarzadzanieProduktami = () => {
   };
 
   const handleAddProduct = async () => {
+    if (!newProduct.name || !newProduct.description || !newProduct.price || !newProduct.type || !newProduct.availability) {
+      setError('Proszę uzupełnić wszystkie pola.');
+      return;
+    }
     try {
       const config = {
         headers: {
@@ -65,6 +70,10 @@ const ZarzadzanieProduktami = () => {
   };
 
   const handleSaveEditedProduct = async () => {
+    if (!editProduct.name || !editProduct.description || !editProduct.price || !editProduct.type || !editProduct.availability) {
+      setError('Proszę uzupełnić wszystkie pola.');
+      return;
+    }
     try {
       await axios.put(`https://localhost:7039/api/Products/${editProduct.id}`, editProduct);
       fetchProducts();
@@ -91,6 +100,9 @@ const openDeleteConfirmation = (productId) => {
 const closeDeleteConfirmation = () => {
   setDeleteProductId(null);
 };
+const formatPrice = (price) => {
+  return parseFloat(price).toFixed(2);
+};
 
   return (
     <div className='p-10 ml-11'>
@@ -102,6 +114,17 @@ const closeDeleteConfirmation = () => {
           <img src={plusIcon} alt="" className="w-8 h-8 mr-2" />Dodaj
         </button>
       </div>
+      {error && (
+        <div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+        <div className="bg-white p-8 rounded-lg">
+        <h2 className="text-2xl font-bold mb-4">Błąd</h2>
+        <p>{error}</p>
+        <button onClick={() => window.location.reload()} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
+        Zamknij
+        </button>
+        </div>
+        </div>
+      )}
       {isEditModalOpen && editProduct && (
         <div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div className="bg-white p-8 rounded-lg shadow-lg">
@@ -147,7 +170,10 @@ const closeDeleteConfirmation = () => {
               className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
             />
             <button
-              onClick={handleSaveEditedProduct}
+            onClick={() => {
+              handleSaveEditedProduct();
+              setIsEditModalOpen(false);                
+              }}
               className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
             >
               Zapisz zmiany
@@ -206,7 +232,10 @@ const closeDeleteConfirmation = () => {
               className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
             />
             <button
-              onClick={handleAddProduct}
+                onClick={() => {
+                handleAddProduct();
+                setIsModalOpen(false)                
+              }}
               className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
             >
               Dodaj produkt
@@ -221,8 +250,8 @@ const closeDeleteConfirmation = () => {
         </div>
       )}
       <div className="w-8/10 mx-auto mt-2">
-        <div className="h-screen overflow-y-auto margin-0">
+        <div className="h-screen overflow-y-auto">
-          <table className="w-full border-collapse border border-gray-500">
+          <table className="w-full border-collapse border border-gray-300">
             <thead className="bg-gray-200 top-0 z-10 sticky">
               <tr>
                 <th className="border border-gray-300 p-2">ID</th>
@@ -241,7 +270,7 @@ const closeDeleteConfirmation = () => {
                   <td className="border border-gray-300 p-2">{product.id}</td>
                   <td className="border border-gray-300 p-2">{product.name}</td>
                   <td className="border border-gray-300 p-2">{product.description}</td>
-                  <td className="border border-gray-300 p-2">{product.price}</td>
+                  <td className="border border-gray-300 p-2">{formatPrice(product.price)}</td>
                   <td className="border border-gray-300 p-2">{product.type}</td>
                   <td className="border border-gray-300 p-2">{product.availability}</td>
                   <td className="border border-gray-300 p-2"><button  onClick={() => handleEditProduct(product)}

firm/yarn.lock

@@ -1789,7 +1789,7 @@
 
 "@remix-run/router@1.16.1":
   version "1.16.1"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.16.1.tgz#73db3c48b975eeb06d0006481bde4f5f2d17d1cd"
+  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz"
   integrity sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==
 
 "@rollup/plugin-babel@^5.2.0":
@@ -2958,7 +2958,7 @@ axe-core@=4.7.0:
 
 axios@^1.7.2:
   version "1.7.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz"
   integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
   dependencies:
     follow-redirects "^1.15.6"
@@ -7956,6 +7956,11 @@ prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-expr@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz"
+  integrity sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz"
@@ -8107,7 +8112,7 @@ react-refresh@^0.11.0:
 
 react-router-dom@^6.23.1:
   version "6.23.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.23.1.tgz#30cbf266669693e9492aa4fc0dde2541ab02322f"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz"
   integrity sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==
   dependencies:
     "@remix-run/router" "1.16.1"
@@ -8115,7 +8120,7 @@ react-router-dom@^6.23.1:
 
 react-router@6.23.1:
   version "6.23.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.23.1.tgz#d08cbdbd9d6aedc13eea6e94bc6d9b29cb1c4be9"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz"
   integrity sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==
   dependencies:
     "@remix-run/router" "1.16.1"
@@ -8177,7 +8182,7 @@ react-scripts@^5.0.1:
 
 react-select@^5.8.0:
   version "5.8.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"
+  resolved "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz"
   integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==
   dependencies:
     "@babel/runtime" "^7.12.0"
@@ -9238,6 +9243,11 @@ thunky@^1.0.2:
   resolved "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+tiny-case@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz"
+  integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"
@@ -9260,6 +9270,11 @@ toidentifier@1.0.1:
   resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 tough-cookie@^4.0.0:
   version "4.1.4"
   resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz"
@@ -9355,6 +9370,11 @@ type-fest@^0.21.3:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+type-fest@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz"
@@ -10110,3 +10130,13 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-1.4.0.tgz#898dcd660f9fb97c41f181839d3d65c3ee15a43e"
+  integrity sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==
+  dependencies:
+    property-expr "^2.0.5"
+    tiny-case "^1.0.3"
+    toposort "^2.0.2"
+    type-fest "^2.19.0"