1
This commit is contained in:
Wiktor Szynaka
parent
7ad61635a5
commit
766da43a8b
29
firm/package-lock.json
generated
29
firm/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
547
firm/yarn.lock
547
firm/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user