date picker i zmiany wizualne tworzenia transakcji

firm/src/components/DatePicker.js

@@ -0,0 +1,32 @@
+const DatePicker = ({ value, onChange, name, className, minDate, maxDate }) => {
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      const newDate = new Date(newValue);
+  
+      if (isNaN(newDate.getTime())) {
+        //alert('Podano niepoprawną datę');
+        return;
+      }
+  
+      onChange(e);
+    };
+
+    const getCurrentDate = () => {
+        const now = new Date();
+        const offset = now.getTimezoneOffset() * 60000; 
+        const localISOTime = new Date(now.getTime() - offset).toISOString().slice(0, 16);
+        return localISOTime;
+      };
+  
+    return (
+      <input
+        type="datetime-local"
+        name={name}
+        value={value || getCurrentDate()}
+        onChange={handleChange}
+        className={className}
+      />
+    );
+  };
+
+export default DatePicker;

firm/src/components/DodawanieTransakcji.js

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import Select from 'react-select';
+import {ReactComponent as MinusIcon} from "../icons/minus-icon.svg"
+import DatePicker from './DatePicker';
 
 const DodawanieTransakcji = () => {
   const [error, setError] = useState(null);
@@ -10,7 +12,7 @@ const DodawanieTransakcji = () => {
     date: '',
     employeeId: '',
     paymentType: '',
-    discount: '',
+    discount: 0,
     description: '',
     transactionProducts: [
       {
@@ -62,6 +64,7 @@ const DodawanieTransakcji = () => {
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     setNewTransaction({ ...newTransaction, [name]: value });
+    console.log(`po: ${name}, ${value}`)
   };
   const handleCancel = () => {
     navigate('/transakcje');
@@ -158,90 +161,157 @@ const DodawanieTransakcji = () => {
   return (
     <div className="bg-white p-8 rounded-lg shadow-lg max-w-4xl mx-auto mt-6">
       <h2 className="text-2xl font-bold mb-6 text-gray-800">Dodaj nową transakcję</h2>
-  
+
       {error && <p className="text-red-500 mb-4">{error}</p>}
-  
+      <div className="mb-4 flex items-center space-x-4">
-      <input
+      <div>
+        <label className="block mb-2 text-gray-700 font-medium">Data transakcji</label>
+        <DatePicker
+          value={newTransaction.date}
+          onChange={handleInputChange}
+          name="date"
+          className="flex-1 mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          maxDate="2099-12-31T23:59"
+        />
+        </div>
+      
+        <div>
+        <label className="block mb-2 text-gray-700 font-medium">Nr pracownika</label>
+          <input
+          type="number"
+          name="employeeId"
+          value={newTransaction.employeeId}
+          onChange={handleInputChange}
+          placeholder="Nr pracownika"
+          className="flex mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        </div>
+
+        
+      </div>
+
+      {/*<input
         type="datetime-local"
         name="date"
         value={newTransaction.date}
         onChange={handleInputChange}
         placeholder="Data"
         className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
+      />*/}
-  
+      <label className="block mb-2 text-gray-700 font-medium">Produkty transakcji</label>
-      <input
+      <div className="border border-gray-300 rounded-lg shadow-sm p-4 h-80 overflow-y-scroll">
-        type="number"
+        {isLoading ? (
-        name="employeeId"
+          <div className="text-center">Ładowanie produktów...</div>
-        value={newTransaction.employeeId}
+        ) : (
-        onChange={handleInputChange}
+          <>
-        placeholder="Nr. Pracownika"
+            {newTransaction.transactionProducts.map((product, index) => (
-        className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              <div key={index} className="mb-4 flex items-center space-x-4">
-      />
+                <Select
-  
+                  name={`productName-${index}`}
-      {isLoading ? (
+                  value={products.find(option => option.value === product.productID)}
-        <div className="text-center">Ładowanie produktów...</div>
+                  onChange={(selectedOption) => handleProductChange(index, selectedOption)}
-      ) : (
+                  options={products}
-        <>
+                  className="flex-1"
-          {newTransaction.transactionProducts.map((product, index) => (
+                  placeholder="Wybierz produkt..."
-            <div key={index} className="mb-4">
+                />
-              <Select
+                <input
-                name={`productName-${index}`}
+                  type="number"
-                value={products.find(option => option.value === product.productID)}
+                  name={`quantity-${index}`}
-                onChange={(selectedOption) => handleProductChange(index, selectedOption)}
+                  value={product.quantity}
-                options={products}
+                  onChange={(e) => {
-                className="block w-full mb-2"
+                    const updatedTransactionProducts = [...newTransaction.transactionProducts];
-                placeholder="Wybierz produkt..."
+                    updatedTransactionProducts[index].quantity = e.target.value;
-              />
+                    setNewTransaction({ ...newTransaction, transactionProducts: updatedTransactionProducts });
-              <input
+                  }}
-                type="number"
+                  placeholder="Ilość"
-                name={`quantity-${index}`}
+                  className="w-24 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                value={product.quantity}
+                />
-                onChange={(e) => {
+                {/*<button
-                  const updatedTransactionProducts = [...newTransaction.transactionProducts];
-                  updatedTransactionProducts[index].quantity = e.target.value;
-                  setNewTransaction({ ...newTransaction, transactionProducts: updatedTransactionProducts });
-                }}
-                placeholder="Ilość"
-                className="block w-full mb-2 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              <button
                 onClick={() => handleRemoveProduct(index)}
                 className="bg-gradient-to-r from-red-500 to-red-700 text-white py-2 px-4 rounded-lg hover:from-red-600 hover:to-red-800 transition"
               >
                 Usuń
-              </button>
+              </button>*/}
-            </div>
+                <button
-          ))}
+                  onClick={handleRemoveProduct}
-        </>
+                  className="relative flex items-center justify-center w-10 h-10 rounded-full text-gray-500 hover:text-red-600 hover:bg-red-100 active:bg-red-200 transition focus:outline-none"
-      )}
+                >
-  
+                  <MinusIcon className="w-5 h-5" />
-      <button
+                </button>
-        onClick={handleAddProduct}
+              </div>
-        className="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-2 px-4 rounded-lg hover:from-blue-600 hover:to-blue-800 transition mb-3"
+            ))}
-      >
+          </>
-        Dodaj produkt
+        )}
-      </button>
+
-  
+        <button
-      <input
+          onClick={handleAddProduct}
+          className="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-2 px-4 rounded-lg hover:from-blue-600 hover:to-blue-800 transition mb-3"
+        >
+          Dodaj produkt
+        </button>
+      </div>
+      {/*<input
         type="text"
         name="paymentType"
         value={newTransaction.paymentType}
         onChange={handleInputChange}
         placeholder="Sposób płatności"
         className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
+      />*/}
-  
+      <div className="mt-6 flex justify-between">
-      <input
+        <div className="mb-4">
-        type="number"
+          <label className="block mb-2 text-gray-700 font-medium">Metoda płatności</label>
-        name="discount"
+          <div className="flex space-x-4">
-        value={newTransaction.discount}
+            <label className="flex items-center">
-        onChange={handleInputChange}
+              <input
-        placeholder="Rabat"
+                type="radio"
-        className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                name="paymentType"
-      />
+                value="BLIK"
-  
+                checked={newTransaction.paymentType === "BLIK"}
-      <input
+                onChange={handleInputChange}
+                className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
+              />
+              <span className="ml-2">BLIK</span>
+            </label>
+            <label className="flex items-center">
+              <input
+                type="radio"
+                name="paymentType"
+                value="Gotówka"
+                checked={newTransaction.paymentType === "Gotówka"}
+                onChange={handleInputChange}
+                className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
+              />
+              <span className="ml-2">Gotówka</span>
+            </label>
+            <label className="flex items-center">
+              <input
+                type="radio"
+                name="paymentType"
+                value="Karta płatnicza"
+                checked={newTransaction.paymentType === "Karta płatnicza"}
+                onChange={handleInputChange}
+                className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
+              />
+              <span className="ml-2">Karta płatnicza</span>
+            </label>
+          </div>
+        </div>
+        <div className="">
+          <label className="block mb-2 text-gray-700 font-medium">Rabat</label>
+        <input
+          type="number"
+          name="discount"
+          value={newTransaction.discount}
+          onChange={handleInputChange}
+          placeholder="Rabat"
+          className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        /></div>
+        
+      </div>
+  <div>
+  <label className="block mb-2 text-gray-700 font-medium">Opis</label>      
+    <input
         type="text"
         name="description"
         value={newTransaction.description}
@@ -249,6 +319,8 @@ const DodawanieTransakcji = () => {
         placeholder="Opis"
         className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
+      </div>
+
   
       <div className="mt-6 flex justify-between">
         <button