This commit is contained in:
Wiktor Szynaka 2024-06-10 22:26:03 +01:00
parent 7ad61635a5
commit 766da43a8b
6 changed files with 486 additions and 400 deletions

29
firm/package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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

View File

@ -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">
<img src={plusIcon} alt="" className="w-8 h-8 mr-2" />Dodaj
</button>
</div>
<div>
<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" />
{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>
)}
<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>
<th className="border border-gray-300 p-2">Data</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">Sposób płatności</th>
<th className="border border-gray-300 p-2">Nr. Pracownika</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border border-gray-300 p-2"><input type="checkbox" /></td>
<td className="border border-gray-300 p-2">Smith</td>
<td className="border border-gray-300 p-2">John</td>
<td className="border border-gray-300 p-2">Programista</td>
<td className="border border-gray-300 p-2">08:00</td>
<td className="border border-gray-300 p-2">16:00</td>
<td className="border border-gray-300 p-2">12345</td>
</tr>
{transactions.map(transaction => (
<tr key={transaction.id}>
<td className="border border-gray-300 p-2">{transaction.id}</td>
<td className="border border-gray-300 p-2">{transaction.date}</td>
<td className="border border-gray-300 p-2">
{transaction.transactionProducts.map(product => (
<div key={product.id}>{product.product.name}</div>
))}
</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-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>
<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-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>

View File

@ -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>
</div>
<div>
<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>
{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">Cena</th>
<th className="border border-gray-300 p-2">Kategoria</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>
<td className="border border-gray-300 p-2"><input type="checkbox" /></td>
<td className="border border-gray-300 p-2">Produkt</td>
<td className="border border-gray-300 p-2">Dostępność</td>
<td className="border border-gray-300 p-2">Cena</td>
<td className="border border-gray-300 p-2">Kategoria</td>
</tr>
{products.map(product => (
<tr key={product.id}>
<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">{product.type}</td>
<td className="border border-gray-300 p-2">{product.availability}</td>
</tr>
))}
</tbody>
</table>
</div>

File diff suppressed because it is too large Load Diff