1

firm/package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.6.8",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.23.0",
@@ -5399,6 +5400,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "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": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -14747,6 +14771,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/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

firm/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.0",

firm/src/components/Sidebar.js

@@ -9,22 +9,22 @@ const Sidebar = () => {
     return (
         <div className="bg-gray-200 h-screen flex justify-center marign-0 w-max">
           <ul className="">
-            <Link to="/panel" className="text-black hover:bg-gray-450 px-10 py-2 block font-customFont text-center w-max hover:bg-gray-500">
+            <Link to="/panel" className="text-black px-10 py-2 block font-customFont text-center w-max">
                 <li className='flex items-center'>
                 <img src={adminIcon} alt="Obrazek 1" className="w-7 h-7 mr-2" />
                 Panel Administratora
             </li></Link>
-            <Link to="/produkty" className="text-black hover:bg-gray-450 px-10 py-2 block font-customFont text-center w-max hover:bg-gray-500">
+            <Link to="/produkty" className="text-black px-10 py-2 block font-customFont text-center w-max">
                 <li className='flex items-center'>
                 <img src={produktIcon} alt="Obrazek 1" className="w-7 h-7 mr-2" />
                 Zarządzanie Produkatami
             </li></Link>
-            <Link to="/transakcje" className="text-black hover:bg-gray-450 px-10 py-2 block font-customFont text-center w-max hover:bg-gray-500">
+            <Link to="/transakcje" className="text-black px-10 py-2 block font-customFont text-center w-max">
                 <li className='flex items-center'>
                 <img src={transakcjeIcon} alt="Obrazek 1" className="w-7 h-7 mr-2" />
                 Transakcje
             </li></Link>
-            <Link to="/harmonogram" className="text-black hover:bg-gray-450 px-10 py-2 block font-customFont text-center w-max hover:bg-gray-500 flex-item-center">
+            <Link to="/harmonogram" className="text-black px-10 py-2 block font-customFont text-center w-max flex-item-center">
                 <li className='flex items-center'>
                 <img src={harmonogramIcon} alt="Obrazek 1" className="w-7 h-7 mr-2" />
                 Harmonogram

firm/src/components/Transakcje.js

@@ -1,58 +1,209 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import editIcon from "../icons/edit.png";
 import koszIcon from "../icons/kosz.png";
 import plusIcon from "../icons/plus.png";
-import lupaIcon from "../icons/lupa.jpg";
 
 const Transakcje = () => {
+  const [transactions, setTransactions] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [newTransaction, setNewTransaction] = useState({
+    id: 1,
+    date: "",
+    employeeId: "",
+    transactionProducts: [
+      {
+        id: 0,
+        transactionId: 0,
+        productID: "",
+        quantity:""
+      }
+    ],
+    paymentType: "",
+    discount: "",
+    description: "",
+    totalPrice: 0
+  });
+
+  const fetchTransactions = async () => {
+    try {
+      const response = await axios.get('https://localhost:7039/api/Transaction');
+      setTransactions(response.data);
+    } catch (error) {
+      console.error('Błąd podczas pobierania transakcji:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchTransactions();
+  }, []);
+
+  const handleAddTransaction = async () => {
+    try {
+      await axios.post('https://localhost:7039/api/Transaction', newTransaction);
+      fetchTransactions();
+      setIsModalOpen(false);
+      setNewTransaction({
+        id: 1,
+        date: "",
+        employeeId: "",
+        transactionProducts: [
+          {
+            id: 0,
+            transactionId: 0,
+            productID: "",
+            quantity: ""
+          }
+        ],
+        paymentType: "",
+        discount: "",
+        description: "",
+        totalPrice: 0
+      });
+    } catch (error) {
+      console.error('Błąd podczas dodawania transakcji:', error);
+    }
+  };
+
   return (
     <div className='p-10 ml-11'>
       <div className='flex items-center justify-between'>
         <div className='h-20 text-5xl ml-1'>
           Lista Transakcji
         </div>
-        <button 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>
+        <button onClick={() => setIsModalOpen(true)} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded flex">
-      </div>
+          <img src={plusIcon} alt="" className="w-8 h-8 mr-2" />Dodaj
-      <div>
+        </button>
-        <div className="relative flex justify-center w-1/3 mt-17">
-          <input type="text" className="px-4 py-2 rounded-full border border-black focus:outline-none focus:border-indigo-500 w-full" />
-          <div className="absolute right-0 top-1/2 transform -translate-y-1/2">
-            <img src={lupaIcon} alt="Lupa" className="w-8 h-8 mr-2" />
       </div>
+      {isModalOpen && (
+        <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">Dodaj nową transakcję</h2>
+            <input
+              type="datetime-local"
+              name="date"
+              value={newTransaction.date}
+              onChange={(e) => setNewTransaction({ ...newTransaction, date: e.target.value })}
+              placeholder="Data"
+              className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+            />
+            <input
+              type="number"
+              name="employeeId"
+              value={newTransaction.employeeId}
+              onChange={(e) => setNewTransaction({ ...newTransaction, employeeId: e.target.value })}
+              placeholder="Nr. Pracownika"
+              className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+            />
+            {newTransaction.transactionProducts.map((product, index) => (
+              <div key={index}>
+                <input
+                  type="number"
+                  name={`productID-${index}`}
+                  value={product.productID}
+                  onChange={(e) => {
+                    const newTransactionProducts = [...newTransaction.transactionProducts];
+                    newTransactionProducts[index].productID = e.target.value;
+                    setNewTransaction({ ...newTransaction, transactionProducts: newTransactionProducts });
+                  }}
+                  placeholder="ID Produktu"
+                  className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+                />
+                <input
+                  type="number"
+                  name={`quantity-${index}`}
+                  value={product.quantity}
+                  onChange={(e) => {
+                    const newTransactionProducts = [...newTransaction.transactionProducts];
+                    newTransactionProducts[index].quantity = e.target.value;
+                    setNewTransaction({ ...newTransaction, transactionProducts: newTransactionProducts });
+                  }}
+                  placeholder="Ilość"
+                  className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+                />
+              </div>
+            ))}
+            <input
+              type="text"
+              name="paymentType"
+              value={newTransaction.paymentType}
+              onChange={(e) => setNewTransaction({ ...newTransaction, paymentType: e.target.value })}
+              placeholder="Sposób płatności"
+              className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+            />
+            <input
+              type="number"
+              name="discount"
+              value={newTransaction.discount}
+              onChange={(e) => setNewTransaction({ ...newTransaction, discount: e.target.value })}
+              placeholder="Rabat"
+              className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+            />
+            <input
+              type="text"
+              name="description"
+              value={newTransaction.description}
+              onChange={(e) => setNewTransaction({ ...newTransaction, description: e.target.value })}
+              placeholder="Opis"
+              className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+            />
+            <button
+              onClick={handleAddTransaction}
+              className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
+            >
+              Dodaj transakcję
+            </button>
+            <button
+              onClick={() => setIsModalOpen(false)}
+              className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+            >
+              Anuluj
+            </button>
           </div>
         </div>
+      )}
       <div className="w-8/10 mx-auto mt-2">
         <div className="h-64 overflow-y-auto">
           <table className="w-full border-collapse border border-gray-300">
             <thead className="bg-gray-200">
               <tr>
-                <th className="border border-gray-300 p-2"></th>
                 <th className="border border-gray-300 p-2">ID</th>
                 <th className="border border-gray-300 p-2">Data</th>
-                  <th className="border border-gray-300 p-2">Godzina</th>
                 <th className="border border-gray-300 p-2">Produkt</th>
                 <th className="border border-gray-300 p-2">Ilość</th>
-                  <th className="border border-gray-300 p-2">Kwota</th>
                 <th className="border border-gray-300 p-2">Sposób płatności</th>
                 <th className="border border-gray-300 p-2">Nr. Pracownika</th>
               </tr>
             </thead>
             <tbody>
-              <tr>
+              {transactions.map(transaction => (
-                <td className="border border-gray-300 p-2"><input type="checkbox" /></td>
+                <tr key={transaction.id}>
-                <td className="border border-gray-300 p-2">Smith</td>
+                  <td className="border border-gray-300 p-2">{transaction.id}</td>
-                <td className="border border-gray-300 p-2">John</td>
+                  <td className="border border-gray-300 p-2">{transaction.date}</td>
-                <td className="border border-gray-300 p-2">Programista</td>
+                  <td className="border border-gray-300 p-2">
-                <td className="border border-gray-300 p-2">08:00</td>
+                    {transaction.transactionProducts.map(product => (
-                <td className="border border-gray-300 p-2">16:00</td>
+                  <div key={product.id}>{product.product.name}</div>
-                <td className="border border-gray-300 p-2">12345</td>
+                    ))}
+                  </td>
+                  <td className="border border-gray-300 p-2">
+                    {transaction.transactionProducts.map(product => (
+                      <div key={product.id}>{product.quantity}</div>
+                    ))}
+                  </td>
+                  <td className="border border-gray-300 p-2">{transaction.paymentType}</td>
+                  <td className="border border-gray-300 p-2">{transaction.employeeId}</td>
                 </tr>
+              ))}
             </tbody>
           </table>
         </div>
         <div className="flex justify-start mt-4">
-          <button 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>
+          <button className="mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex">
-          <button className="mr-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded flex"><img src={koszIcon} alt="" className="w-8 h-8 mr-2" />Usuń</button>
+            <img src={editIcon} alt="" className="w-8 h-8 mr-2" />Edytuj
+          </button>
+          <button className="mr-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded flex">
+            <img src={koszIcon} alt="" className="w-8 h-8 mr-2" />Usuń
+          </button>
         </div>
       </div>
     </div>

firm/src/components/ZarzadzanieProduktami.js

@@ -1,39 +1,103 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import editIcon from "../icons/edit.png";
 import koszIcon from "../icons/kosz.png";
 import plusIcon from "../icons/plus.png";
 
 const ZarzadzanieProduktami = () => {
+  const [products, setProducts] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [newProduct, setNewProduct] = useState({
+    name: "",
+    description: "",
+    price: "",
+    type: "",
+    availability: ""
+  });
+
+  const fetchProducts = async () => {
+    try {
+      const response = await axios.get('https://localhost:7039/api/Products');
+      setProducts(response.data);
+    } catch (error) {
+      console.error('Błąd podczas pobierania produktów:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setNewProduct({ ...newProduct, [name]: value });
+  };
+
+  const handleAddProduct = async () => {
+    try {
+      const config = {
+        headers: {
+          'Content-Type': 'text/json'
+        }
+      };
+      await axios.post('https://localhost:7039/api/Products', newProduct, config);
+      fetchProducts();
+      setIsModalOpen(false);
+      setNewProduct({
+        name: "",
+        availability: "",
+        price: "",
+        type: ""
+      });
+    } catch (error) {
+      console.error('Błąd podczas dodawania produktu:', error);
+    }
+  };
+
   return (
     <div className='p-10 ml-11'>
       <div className='flex items-center justify-between'>
         <div className='h-20 text-5xl ml-1'>
           Katalog Produktów
         </div>
-        <button 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>
+        <button onClick={() => setIsModalOpen(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>
-      <div>
+      {isModalOpen && (
+        <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">Dodaj nowy produkt</h2>
+            <input type="text" name="name" value={newProduct.name} onChange={handleInputChange} placeholder="Nazwa produktu" className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" />
+            <input type="text" name="description" value={newProduct.description} onChange={handleInputChange} placeholder="Opis" className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" />
+            <input type="text" name="price" value={newProduct.price} onChange={handleInputChange} placeholder="Cena" className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" />
+            <input type="text" name="type" value={newProduct.type} onChange={handleInputChange} placeholder="Typ" className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" />
+            <input type="text" name="availability" value={newProduct.availability} onChange={handleInputChange} placeholder="Dostępność" className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" />
+            <button onClick={handleAddProduct} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Dodaj produkt</button>
+            <button onClick={() => setIsModalOpen(false)} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Anuluj</button>
           </div>
+        </div>
+      )}
       <div className="w-8/10 mx-auto mt-2">
         <div className="h-64 overflow-y-auto">
           <table className="w-full border-collapse border border-gray-300">
             <thead className="bg-gray-200">
               <tr>
-                <th className="border border-gray-300 p-2"></th>
                 <th className="border border-gray-300 p-2">Produkt</th>
-                  <th className="border border-gray-300 p-2">Dostępność</th>
+                <th className="border border-gray-300 p-2">Opis</th>
                 <th className="border border-gray-300 p-2">Cena</th>
                 <th className="border border-gray-300 p-2">Kategoria</th>
+                <th className="border border-gray-300 p-2">Dostępność</th>
               </tr>
             </thead>
             <tbody>
-              <tr>
+              {products.map(product => (
-                <td className="border border-gray-300 p-2"><input type="checkbox" /></td>
+                <tr key={product.id}>
-                <td className="border border-gray-300 p-2">Produkt</td>
+                  <td className="border border-gray-300 p-2">{product.name}</td>
-                <td className="border border-gray-300 p-2">Dostępność</td>
+                  <td className="border border-gray-300 p-2">{product.description}</td>
-                <td className="border border-gray-300 p-2">Cena</td>
+                  <td className="border border-gray-300 p-2">{product.price}</td>
-                <td className="border border-gray-300 p-2">Kategoria</td>
+                  <td className="border border-gray-300 p-2">{product.type}</td>
+                  <td className="border border-gray-300 p-2">{product.availability}</td>
                 </tr>
+              ))}
             </tbody>
           </table>
         </div>