From 77c4dc9c36df6d17c03e96ce32a6316cc163d887 Mon Sep 17 00:00:00 2001 From: Wiktor Szynaka Date: Wed, 12 Jun 2024 01:33:57 +0100 Subject: [PATCH 1/4] 2 --- firm/src/App.js | 4 + firm/src/components/Raporty.js | 101 ++++++ firm/src/components/Sidebar.js | 12 + firm/src/components/Transakcje.js | 358 ++++++++++++++----- firm/src/components/Wydatki.js | 146 ++++++++ firm/src/components/ZarzadzanieProduktami.js | 180 +++++++++- firm/src/icons/raport.png | Bin 0 -> 1686 bytes firm/src/icons/wydatki.png | Bin 0 -> 10228 bytes 8 files changed, 688 insertions(+), 113 deletions(-) create mode 100644 firm/src/components/Raporty.js create mode 100644 firm/src/components/Wydatki.js create mode 100644 firm/src/icons/raport.png create mode 100644 firm/src/icons/wydatki.png diff --git a/firm/src/App.js b/firm/src/App.js index a162782..2857841 100644 --- a/firm/src/App.js +++ b/firm/src/App.js @@ -6,6 +6,8 @@ import ZarzadzanieProduktami from './components/ZarzadzanieProduktami'; import Transakcje from './components/Transakcje'; import NavBar from './components/NavBar' import Sidebar from './components/Sidebar'; +import Wydatki from './components/Wydatki'; +import Raporty from './components/Raporty'; const App = () => { return ( @@ -21,6 +23,8 @@ const App = () => { } /> } /> } /> + } /> + } /> diff --git a/firm/src/components/Raporty.js b/firm/src/components/Raporty.js new file mode 100644 index 0000000..d8eea7b --- /dev/null +++ b/firm/src/components/Raporty.js @@ -0,0 +1,101 @@ +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; +import koszIcon from "../icons/kosz.png"; + +const Raporty = () => { + const [fromDate, setFromDate] = useState(''); + const [toDate, setToDate] = useState(''); + const [reports, setReports] = useState([]); + + const fetchReports = async () => { + try { + const response = await axios.get('https://localhost:7039/api/Report'); + setReports(response.data); + } catch (error) { + console.error('Błąd podczas pobierania raportów:', error); + } + }; + + useEffect(() => { + fetchReports(); + }, []); + + const handleGenerateReport = async () => { + try { + const response = await axios.post('https://localhost:7039/api/Report', { + fromDate, + toDate + }); + const newReport = response.data; + setReports([...reports, newReport]); + } catch (error) { + console.error('Błąd podczas generowania raportu:', error); + } + }; + + const handleDeleteReport = async (reportId) => { + try { + await axios.delete(`https://localhost:7039/api/Report/${reportId}`); + fetchReports(); + } catch (error) { + console.error('Błąd podczas usuwania raportu:', error); + } + }; + + 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(",", ""); + }; + + return ( +
+
+
+ Generowanie raportów +
+
+
+ + setFromDate(e.target.value)} className="mr-5" /> + + setToDate(e.target.value)} className="mr-5" /> + +
+
+

Raporty

+ + + + + + + + + + + + + + {reports.map(report => ( + + + + + + + + + + ))} + +
IDData odData doSuma dochodówSuma wydatkówBilans
{report.id}{formatDate(report.fromDate)}{formatDate(report.toDate)}{report.totalIncome}{report.totalExpenses}{report.totalBalance} + +
+
+
+ ); +}; + +export default Raporty; diff --git a/firm/src/components/Sidebar.js b/firm/src/components/Sidebar.js index 643682e..2d9f4f3 100644 --- a/firm/src/components/Sidebar.js +++ b/firm/src/components/Sidebar.js @@ -4,6 +4,8 @@ import adminIcon from "../icons/panel.png"; import produktIcon from "../icons/produkty.png"; import transakcjeIcon from "../icons/transkacje.png"; import harmonogramIcon from "../icons/harmonogram.png"; +import wydatkiIcon from "../icons/wydatki.png"; +import raportyIcon from "../icons/raport.png"; const Sidebar = () => { return ( @@ -29,6 +31,16 @@ const Sidebar = () => { Obrazek 1 Harmonogram + +
  • + Obrazek 1 + Wydatki +
    • + +
  • + Obrazek 1 + Raporty +
    • ); diff --git a/firm/src/components/Transakcje.js b/firm/src/components/Transakcje.js index ea8a15a..348b61f 100644 --- a/firm/src/components/Transakcje.js +++ b/firm/src/components/Transakcje.js @@ -7,14 +7,16 @@ import plusIcon from "../icons/plus.png"; const Transakcje = () => { const [transactions, setTransactions] = useState([]); const [isModalOpen, setIsModalOpen] = useState(false); + const [isEditModalOpen, setIsEditModalOpen] = useState(false); + const [editTransaction, setEditTransaction] = useState(null); const [newTransaction, setNewTransaction] = useState({ - id: 1, + id: 2, date: "", employeeId: "", transactionProducts: [ { id: 0, - transactionId: 0, + transactionId: 2, productID: "", quantity:"" } @@ -40,17 +42,19 @@ const Transakcje = () => { const handleAddTransaction = async () => { try { + console.log('Nowa transakcja:', newTransaction); await axios.post('https://localhost:7039/api/Transaction', newTransaction); + fetchTransactions(); setIsModalOpen(false); setNewTransaction({ - id: 1, + id: 2, date: "", employeeId: "", transactionProducts: [ { id: 0, - transactionId: 0, + transactionId: 2, productID: "", quantity: "" } @@ -65,6 +69,60 @@ 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 handleAddProduct = () => { + setNewTransaction({ + ...newTransaction, + transactionProducts: [ + ...newTransaction.transactionProducts, + { + id: 0, + transactionId: 2, + productID: "", + quantity: "" + } + ] + }); + }; + + const handleRemoveProduct = (index) => { + const updatedTransactionProducts = [...newTransaction.transactionProducts]; + updatedTransactionProducts.splice(index, 1); + setNewTransaction({ + ...newTransaction, + transactionProducts: updatedTransactionProducts + }); + }; + + const handleDeleteTransaction = async (transactionId) => { + try { + await axios.delete(`https://localhost:7039/api/Transaction/${transactionId}`); + fetchTransactions(); + } catch (error) { + console.error('Błąd podczas usuwania transakcji:', error); + } + }; + const handleEditTransaction = (transaction) => { + setEditTransaction(transaction); + setIsEditModalOpen(true); + }; + const handleSaveEditedTransaction = async () => { + try { + await axios.put(`https://localhost:7039/api/Transaction/${editTransaction.id}`, editTransaction); + fetchTransactions(); + setIsEditModalOpen(false); + } catch (error) { + console.error('Błąd podczas edycji transakcji:', error); + } + }; + + return (
    @@ -75,6 +133,97 @@ const Transakcje = () => { Dodaj
    + {isEditModalOpen && editTransaction && ( +
    +
    +

    Edytuj transakcję

    + setEditTransaction({ ...editTransaction, date: e.target.value })} + placeholder="Data" + className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" + /> + setEditTransaction({ ...editTransaction, employeeId: e.target.value })} + placeholder="Nr. Pracownika" + className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" + /> + {editTransaction.transactionProducts.map((product, index) => ( +
    + { + const newTransactionProducts = [...editTransaction.transactionProducts]; + newTransactionProducts[index].productID = e.target.value; + setEditTransaction({ ...editTransaction, transactionProducts: newTransactionProducts }); + }} + placeholder="ID Produktu" + className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"/> + { + const newTransactionProducts = [...editTransaction.transactionProducts]; + newTransactionProducts[index].quantity = e.target.value; + setEditTransaction({ ...editTransaction, transactionProducts: newTransactionProducts }); + }} + placeholder="Ilość" + className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" + /> +
    + ))} + setEditTransaction({ ...editTransaction, 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" + /> + setEditTransaction({ ...editTransaction, discount: e.target.value })} + placeholder="Rabat" + className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" + /> + setEditTransaction({ ...editTransaction, description: e.target.value })} + placeholder="Opis" + className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" + /> + + +
    +
    + )} + + {isModalOpen && (
    @@ -118,96 +267,117 @@ const Transakcje = () => { 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" - /> -
    - ))} - 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" - /> - setNewTransaction({ ...newTransaction, discount: e.target.value })} - placeholder="Rabat" - className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" - /> - setNewTransaction({ ...newTransaction, description: e.target.value })} - placeholder="Opis" - className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" - /> - - + placeholder="Ilość" className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" + /> + +
    + ))} + + 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" + /> + setNewTransaction({ ...newTransaction, discount: e.target.value })} + placeholder="Rabat" + className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" + /> + setNewTransaction({ ...newTransaction, description: e.target.value })} + placeholder="Opis" + className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg" + /> + + +
    + + )} +
    +
    + + + + + + + + + + + + + + + + {transactions.map(transaction => ( + + + + + + + + + + + + ))} + +
    IDDataProduktIlośćKwotaSposób płatnościNr. Pracownika
    {transaction.id}{formatDate(transaction.date)} + {transaction.transactionProducts.map(product => ( +
    {product.product.name}
    + ))} +     		+ {transaction.transactionProducts.map(product => ( +
    {product.quantity}
    + ))} +     		{transaction.totalPrice}{transaction.paymentType}{transaction.employeeId}
    +
    +
    - )} -
    -
    - - - - - - - - - - - - - {transactions.map(transaction => ( - - - - - - - - - ))} - -
    IDDataProduktIlośćSposób płatnościNr. Pracownika
    {transaction.id}{transaction.date} - {transaction.transactionProducts.map(product => ( -
    {product.product.name}
    - ))} -     		- {transaction.transactionProducts.map(product => ( -
    {product.quantity}
    - ))} -     		{transaction.paymentType}{transaction.employeeId}
    -
    -
    - - -
    - - ); -} - -export default Transakcje; + ); + } + + export default Transakcje + + + + + + diff --git a/firm/src/components/Wydatki.js b/firm/src/components/Wydatki.js new file mode 100644 index 0000000..5b03e61 --- /dev/null +++ b/firm/src/components/Wydatki.js @@ -0,0 +1,146 @@ +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; +import koszIcon from "../icons/kosz.png"; +import plusIcon from "../icons/plus.png"; + +const Wydatki = () => { + const [expenses, setExpenses] = useState([]); + const [showModal, setShowModal] = useState(false); + const [newExpense, setNewExpense] = useState({ + date: '', + value: '', + description: '' + }); + + const fetchExpenses = async () => { + try { + const response = await axios.get('https://localhost:7039/api/Expenses'); + setExpenses(response.data); + } catch (error) { + console.error('Błąd podczas pobierania wydatków:', error); + } + }; + + useEffect(() => { + fetchExpenses(); + }, []); + + const handleAddExpense = async () => { + try { + const response = await axios.post('https://localhost:7039/api/Expenses', newExpense); + const addedExpense = response.data; + setExpenses([...expenses, addedExpense]); + setNewExpense({ + date: '', + value: '', + description: '' + }); + setShowModal(false); + } catch (error) { + console.error('Błąd podczas dodawania wydatku:', error); + } + }; + + const handleDeleteExpense = async (expenseId) => { + try { + await axios.delete(`https://localhost:7039/api/Expenses/${expenseId}`); + fetchExpenses(); + } catch (error) { + console.error('Błąd podczas usuwania wydatku:', error); + } + }; + + 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(",", ""); + }; + + return ( +
    +
    +
    + Zarządzanie wydatkami +
    +
    + +
    +
    +

    Wydatki

    + +
    + + + + + + + + + + + + {expenses.map(expense => ( + + + + + + + + ))} + +
    IDDataWartośćOpis
    {expense.id}{formatDate(expense.date)}{expense.value}{expense.description} + +
    +
    + {showModal && ( +
    +
    +
    +
    +
    +
    +
    +

    Dodaj nowy wydatek

    +
    +
    +
    +
    + + setNewExpense({ ...newExpense, date: e.target.value })} className="mt-1 border py-1 px-3 block w-full shadow-sm sm:text-sm rounded-md" /> +
    + +
    + + setNewExpense({ ...newExpense, value: e.target.value })} className="mt-1 border py-1 px-3 block w-full shadow-sm sm:text-sm rounded-md" /> +
    + +
    + +