poprawa edycji transakcji, dodanie harmonogramu

firm/src/components/DodawanieProduktów.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom'; 
 
@@ -13,6 +13,15 @@ const DodawanieProduktu = () => {
   });
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (newProduct.type === '0') {
+      setNewProduct(prevState => ({
+        ...prevState,
+        availability: '',
+      }));
+    }
+  }, [newProduct.type]);
+
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     setNewProduct({ ...newProduct, [name]: value });

firm/src/components/EdycjaProduktu.js

@@ -11,7 +11,7 @@ const EdycjaProduktu = () => {
     type: '1',
     availability: '',
   });
-  const [error, setError] = useState(null);
+  const [errors, setErrors] = useState({});
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -19,7 +19,7 @@ const EdycjaProduktu = () => {
       try {
         const token = localStorage.getItem('token');
         if (!token) {
-          setError('Brak tokena. Użytkownik musi być zalogowany.');
+          setErrors({ general: 'Brak tokena. Użytkownik musi być zalogowany.' });
           return;
         }
 
@@ -28,10 +28,18 @@ const EdycjaProduktu = () => {
             Authorization: `Bearer ${token}`,
           },
         });
-        setProduct(response.data);
+
+        const productData = response.data;
+        setProduct({
+          name: productData.name,
+          description: productData.description,
+          price: productData.price,
+          type: productData.type.toString(),
+          availability: productData.availability || '',
+        });
       } catch (error) {
         console.error('Błąd podczas pobierania produktu:', error);
-        setError('Wystąpił błąd podczas pobierania danych produktu.');
+        setErrors({ general: 'Wystąpił błąd podczas pobierania danych produktu.' });
       }
     };
 
@@ -40,14 +48,42 @@ const EdycjaProduktu = () => {
 
   const handleInputChange = (event) => {
     const { name, value } = event.target;
+
+    if (name === 'type') {
+      if (value === '0') {
+        setProduct({
+          ...product,
+          [name]: value,
+          availability: '',
+        });
+      } else {
+        setProduct({
+          ...product,
+          [name]: value,
+        });
+      }
+    } else {
       setProduct({ ...product, [name]: value });
+    }
+    setErrors((prevErrors) => ({
+      ...prevErrors,
+      [name]: null,
+    }));
   };
 
   const handleSaveChanges = async () => {
     const { name, description, price, type, availability } = product;
+    let validationErrors = {};
 
-    if (!name || !description || !price || type === '') {
+    if (!name) validationErrors.name = 'Nazwa produktu jest wymagana.';
-      setError('Proszę uzupełnić wszystkie wymagane pola.');
+    if (!description) validationErrors.description = 'Opis produktu jest wymagany.';
+    if (!price) validationErrors.price = 'Cena produktu jest wymagana.';
+    if (type === '') validationErrors.type = 'Typ produktu jest wymagany.';
+    if (price < 0) validationErrors.price = 'Cena nie może być ujemna.';
+    if (type === '1' && !availability) validationErrors.availability = 'Dostępność jest wymagana dla produktu.';
+
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
       return;
     }
 
@@ -63,7 +99,7 @@ const EdycjaProduktu = () => {
     try {
       const token = localStorage.getItem('token');
       if (!token) {
-        setError('Brak tokena. Użytkownik musi być zalogowany.');
+        setErrors({ general: 'Brak tokena. Użytkownik musi być zalogowany.' });
         return;
       }
 
@@ -74,29 +110,27 @@ const EdycjaProduktu = () => {
         },
       };
 
-      const response = await axios.put(`https://localhost:7039/api/Products/${id}`, payload, config);
+      await axios.put(`https://localhost:7039/api/Products/${id}`, payload, config);
-  
+      setErrors({});
-      console.log('Produkt zapisany:', response.data);
-  
-      setError(null);
       navigate('/produkty');
     } catch (error) {
       console.error('Błąd podczas zapisywania zmian:', error);
 
       if (error.response && error.response.status === 400) {
-        setError('ID produktu nie zgadza się.');
+        setErrors({ general: error.response.data });
       } else {
-        setError('Wystąpił błąd podczas zapisywania zmian. Spróbuj ponownie.');
+        setErrors({ general: 'Wystąpił błąd podczas zapisywania zmian. Spróbuj ponownie.' });
       }
     }
   };
 
-
   return (
     <div className="p-8 bg-gray-100 rounded-lg shadow-md">
       <h2 className="text-2xl font-bold mb-4">Edycja produktu</h2>
-      {error && <p className="text-red-500 mb-4">{error}</p>}
+      {errors.general && <p className="text-red-500 mb-4">{errors.general}</p>}
-      <div className="grid grid-cols-2 gap-4">
+
+      <div className="grid grid-cols-2 gap-8">
+        <div className="relative">
           <input
             type="text"
             name="name"
@@ -105,6 +139,10 @@ const EdycjaProduktu = () => {
             placeholder="Nazwa produktu lub usługi"
             className="block w-full px-4 py-2 border border-gray-300 rounded-lg"
           />
+          {errors.name && <span className="absolute text-red-500 text-sm">{errors.name}</span>}
+        </div>
+
+        <div className="relative">
           <input
             type="text"
             name="description"
@@ -113,6 +151,10 @@ const EdycjaProduktu = () => {
             placeholder="Opis"
             className="block w-full px-4 py-2 border border-gray-300 rounded-lg"
           />
+          {errors.description && <span className="absolute text-red-500 text-sm">{errors.description}</span>}
+        </div>
+
+        <div className="relative">
           <input
             type="number"
             step="0.01"
@@ -122,6 +164,10 @@ const EdycjaProduktu = () => {
             placeholder="Cena"
             className="block w-full px-4 py-2 border border-gray-300 rounded-lg"
           />
+          {errors.price && <span className="absolute text-red-500 text-sm">{errors.price}</span>}
+        </div>
+
+        <div className="relative">
           <select
             name="type"
             value={product.type}
@@ -131,7 +177,11 @@ const EdycjaProduktu = () => {
             <option value="1">Produkt</option>
             <option value="0">Usługa</option>
           </select>
+          {errors.type && <span className="absolute text-red-500 text-sm">{errors.type}</span>}
+        </div>
+
         {product.type === '1' && (
+          <div className="relative">
             <input
               type="number"
               name="availability"
@@ -140,8 +190,11 @@ const EdycjaProduktu = () => {
               placeholder="Dostępność (ilość)"
               className="block w-full px-4 py-2 border border-gray-300 rounded-lg"
             />
+            {errors.availability && <span className="absolute text-red-500 text-sm">{errors.availability}</span>}
+          </div>
         )}
       </div>
+
       <div className="mt-4">
         <button
           onClick={handleSaveChanges}

firm/src/components/EdycjaTransakcji.js

@@ -1,190 +1,251 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import axios from 'axios';
+import axios from "axios";
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate } from "react-router-dom";
-import Select from 'react-select';
+import Select from "react-select";
 
 const EdycjaTransakcji = () => {
   const { id } = useParams();
   const [transaction, setTransaction] = useState({
-    date: '',
+    id: 2,
-    employeeId: '',
+    date: "",
-    paymentType: '',
+    employeeId: "",
-    discount: '',
+    transactionProducts: [],
-    description: '',
+    paymentType: "",
-    transactionProducts: [{ productID: '', productName: '', quantity: '' }],
+    discount: "",
+    description: "",
+    totalPrice: 0,
   });
   const [products, setProducts] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [errors, setErrors] = useState({});
   const navigate = useNavigate();
 
   const getToken = () => {
-    const token = localStorage.getItem('token');
+    const token = localStorage.getItem("token");
     if (!token) {
-      setError('Brak tokena. Użytkownik musi być zalogowany.');
+      setError("Brak tokena. Użytkownik musi być zalogowany.");
+      return null;
     }
     return token;
   };
 
   useEffect(() => {
-    const fetchTransaction = async () => {
+    const fetchTransactionData = async () => {
-      try {
       const token = getToken();
       if (!token) return;
 
-        const transactionResponse = await axios.get(`https://localhost:7039/api/transaction/${id}`, {
+      try {
-          headers: {
+        const [transactionRes, productsRes] = await Promise.all([
-            Authorization: `Bearer ${token}`,
+          axios.get(`https://localhost:7039/api/transaction/${id}`, {
-          },
+            headers: { Authorization: `Bearer ${token}` },
-        });
+          }),
-        console.log('Dane transakcji:', transactionResponse.data);
+          axios.get("https://localhost:7039/api/Products", {
+            headers: { Authorization: `Bearer ${token}` },
+          }),
+        ]);
 
         const updatedTransaction = {
-          ...transactionResponse.data,
+          ...transactionRes.data,
-          transactionProducts: transactionResponse.data.transactionProducts.map((transactionProduct) => ({
+          transactionProducts: transactionRes.data.transactionProducts.map((tp) => ({
-            productID: transactionProduct.product.id,
+            id: tp.id,
-            productName: transactionProduct.product.name,
+            transactionId: transactionRes.data.id,
-            quantity: transactionProduct.quantity,
+            productID: tp.product.id,
+            productName: tp.product.name,
+            quantity: tp.quantity,
           })),
         };
         setTransaction(updatedTransaction);
 
-        const productResponse = await axios.get('https://localhost:7039/api/Products', {
+        const productOptions = productsRes.data.map((product) => ({
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        });
-        console.log('Produkty:', productResponse.data);
-  
-        const productOptions = productResponse.data.map((product) => ({
           value: product.id,
           label: product.name,
         }));
         setProducts(productOptions);
-      } catch (error) {
+      } catch (err) {
-        console.error('Błąd podczas pobierania transakcji lub produktów:', error);
+        console.error(err);
-        setError('Wystąpił błąd podczas ładowania danych.');
+        setError("Wystąpił błąd podczas ładowania danych.");
-      } finally {
-        setIsLoading(false);
       }
     };
 
-    fetchTransaction();
+    fetchTransactionData();
   }, [id]);
 
+  const validateForm = () => {
+    const validationErrors = {};
+    if (!transaction.date) validationErrors.date = "Data transakcji jest wymagana.";
+    if (!transaction.employeeId || transaction.employeeId <= 0) validationErrors.employeeId = "Numer pracownika jest błędny.";
+    if (transaction.transactionProducts.length === 0)
+      validationErrors.transactionProducts = "Transakcja musi zawierać co najmniej jeden produkt.";
+    else {
+      transaction.transactionProducts.forEach((product, index) => {
+        if (!product.productID) validationErrors[`productID_${index}`] = "Produkt jest wymagany.";
+        if (!product.quantity || product.quantity <= 0)
+          validationErrors[`quantity_${index}`] = "Ilość musi być większa niż 0.";
+      });
+    }
+    if (!transaction.paymentType) validationErrors.paymentType = "Sposób płatności jest wymagany.";
+    if (transaction.discount < 0) validationErrors.discount = "Rabat nie może być ujemny.";
 
+    setErrors(validationErrors);
+    return Object.keys(validationErrors).length === 0;
+  };
 
   const handleInputChange = (event) => {
     const { name, value } = event.target;
-    setTransaction({ ...transaction, [name]: value });
+    setTransaction((prev) => ({ ...prev, [name]: value }));
+    setErrors((prevErrors) => ({ ...prevErrors, [name]: null }));
+  };
+
+  const handleAddProduct = () => {
+    setTransaction((prev) => ({
+      ...prev,
+      transactionProducts: [
+        ...prev.transactionProducts,
+        { id: null, transactionId: prev.id, productID: 0, productName: "", quantity: "" },
+      ],
+    }));
   };
 
   const handleProductChange = (index, selectedOption) => {
-    const updatedTransactionProducts = [...transaction.transactionProducts];
+    setTransaction((prev) => {
-    updatedTransactionProducts[index].productID = selectedOption.value;
+      const updatedProducts = prev.transactionProducts.map((product, i) =>
-    updatedTransactionProducts[index].productName = selectedOption.label;
+        i === index
-    setTransaction({
+          ? { ...product, productID: selectedOption.value, productName: selectedOption.label }
-      ...transaction,
+          : product
-      transactionProducts: updatedTransactionProducts,
+      );
+      return { ...prev, transactionProducts: updatedProducts };
     });
+    setErrors((prevErrors) => ({ ...prevErrors, [`productID_${index}`]: null }));
   };
 
-
+  const handleQuantityChange = (index, quantity) => {
-  const handleAddProduct = () => {
+    setTransaction((prev) => {
-    setTransaction({
+      const updatedProducts = prev.transactionProducts.map((product, i) =>
-      ...transaction,
+        i === index ? { ...product, quantity } : product
-      transactionProducts: [
+      );
-        ...transaction.transactionProducts,
+      return { ...prev, transactionProducts: updatedProducts };
-        { productID: 0, productName: '', quantity: '' },
-      ],
     });
+    setErrors((prevErrors) => ({ ...prevErrors, [`quantity_${index}`]: null }));
   };
 
-  const handleRemoveProduct = (index) => {
+  const handleRemoveProduct = async (index) => {
-    const updatedTransactionProducts = [...transaction.transactionProducts];
+    const token = getToken();
-    updatedTransactionProducts.splice(index, 1);
+    if (!token) {
-    setTransaction({
+      console.error("Brak tokena, nie można usunąć produktu.");
-      ...transaction,
+      setError("Użytkownik musi być zalogowany.");
-      transactionProducts: updatedTransactionProducts,
+      return;
-    });
+    }
-  };
   
-  const handleSaveChanges = async () => {
+    const productToRemove = transaction.transactionProducts[index];
-    if (!transaction.date || !transaction.employeeId || transaction.transactionProducts.some(product => !product.productName || !product.quantity)) {
+    console.log(productToRemove);
-      setError('Proszę uzupełnić wszystkie pola.');
+  
+    if (!productToRemove || !productToRemove.id) {
+      console.error("Nie znaleziono ID transakcyjnego produktu. Usuwanie lokalne.");
+      setTransaction((prev) => ({
+        ...prev,
+        transactionProducts: prev.transactionProducts.filter((_, i) => i !== index),
+      }));
       return;
     }
   
     try {
-      const token = getToken();
+      await axios.delete(
-      if (!token) {
+        `https://localhost:7039/api/Transaction/${transaction.id}/product/${productToRemove.productID}`,
-        setError('Brak tokena. Użytkownik musi być zalogowany.');
+        { headers: { Authorization: `Bearer ${token}` } }
-        return;
+      );
-      }
+      console.log(`Produkt o ID transakcji ${productToRemove.id} został usunięty.`);
   
-      const response = await axios.put(`https://localhost:7039/api/transaction/${id}`, transaction, {
+      setTransaction((prev) => ({
-        headers: {
+        ...prev,
-          Authorization: `Bearer ${token}`,
+        transactionProducts: prev.transactionProducts.filter((_, i) => i !== index),
-        },
+      }));
-      });
+    } catch (err) {
-      console.log('Zaktualizowana transakcja:', response.data);
+      console.error("Błąd podczas usuwania produktu:", err.response?.data || err.message);
-      navigate('/transakcje');
+      setError(err.response?.data?.message || "Nie udało się usunąć produktu. Spróbuj ponownie.");
-    } catch (error) {
+    }
-      console.error('Błąd podczas zapisywania zmian:', error);
+  };
-      setError('Wystąpił błąd podczas zapisywania zmian.');
+  
+  
+  
+
+  const handleSaveChanges = async () => {
+    if (!validateForm()) return;
+
+    const token = getToken();
+    if (!token) return;
+
+    const updatedTransaction = {
+      ...transaction,
+      transactionProducts: transaction.transactionProducts.map((tp) => ({
+        id: tp.id || 0,
+        transactionId: transaction.id,
+        productID: tp.productID,
+        productName: tp.productName,
+        quantity: Number(tp.quantity),
+      })),
+    };
+
+    try {
+      await axios.put(
+        `https://localhost:7039/api/transaction/${transaction.id}`,
+        updatedTransaction,
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      navigate("/transakcje");
+    } catch (err) {
+      console.error(err);
+      setError(err.response.data);
     }
   };
 
   return (
     <div className="bg-white p-8 rounded-lg">
       <h2 className="text-2xl font-bold mb-4">Edycja Transakcji</h2>
-
       {error && <p className="text-red-500 mb-4">{error}</p>}
-
+      <div className="mb-4">
         <input
           type="datetime-local"
           name="date"
           value={transaction.date}
           onChange={handleInputChange}
           placeholder="Data"
-        className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+          className="block w-full px-4 py-2 border border-gray-300 rounded-lg"
         />
-
+        {errors.date && <span className="text-red-500 text-sm">{errors.date}</span>}
+      </div>
+      <div className="mb-4">
         <input
           type="number"
           name="employeeId"
           value={transaction.employeeId}
           onChange={handleInputChange}
           placeholder="Nr. Pracownika"
-        className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+          className="block w-full px-4 py-2 border border-gray-300 rounded-lg"
         />
-
+        {errors.employeeId && <span className="text-red-500 text-sm">{errors.employeeId}</span>}
-      {isLoading ? (
+      </div>
-        <div className="text-center">Ładowanie produktów...</div>
-      ) : (
-        <>
       {transaction.transactionProducts.map((product, index) => (
         <div key={index} className="mb-4">
           <Select
-                name={`productName-${index}`}
+            value={products.find((p) => p.value === product.productID) || null}
-                value={products.find(option => option.value === product.productID) || null}
+            onChange={(option) => handleProductChange(index, option)}
-                onChange={(selectedOption) => handleProductChange(index, selectedOption)}
             options={products}
-                className="block w-full mb-2"
+            className="mb-2"
-                placeholder="Wybierz produkt..."
+            placeholder="Wybierz produkt"
           />
+          {errors[`productID_${index}`] && (
+            <span className="text-red-500 text-sm">{errors[`productID_${index}`]}</span>
+          )}
           <input
             type="number"
-                name={`quantity-${index}`}
             value={product.quantity}
-                onChange={(e) => {
+            onChange={(e) => handleQuantityChange(index, e.target.value)}
-                  const updatedTransactionProducts = [...transaction.transactionProducts];
-                  updatedTransactionProducts[index].quantity = e.target.value;
-                  setTransaction({ ...transaction, transactionProducts: updatedTransactionProducts });
-                }}
             placeholder="Ilość"
-                className="block w-full mb-2 px-4 py-2 border border-gray-300 rounded-lg"
+            className="block w-full px-4 py-2 border border-gray-300 rounded-lg"
           />
+          {errors[`quantity_${index}`] && (
+            <span className="text-red-500 text-sm">{errors[`quantity_${index}`]}</span>
+          )}
           <button
             onClick={() => handleRemoveProduct(index)}
             className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
@@ -193,46 +254,39 @@ const EdycjaTransakcji = () => {
           </button>
         </div>
       ))}
-        </>
-      )}
-
       <button
         onClick={handleAddProduct}
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 my-3 rounded"
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
       >
         Dodaj produkt
       </button>
-
+      <div className="mb-4">
         <input
           type="text"
           name="paymentType"
           value={transaction.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"
+          className="block w-full px-4 py-2 border border-gray-300 rounded-lg"
         />
-
+        {errors.paymentType && (
+          <span className="text-red-500 text-sm">{errors.paymentType}</span>
+        )}
+      </div>
+      <div className="mb-4">
         <input
           type="number"
           name="discount"
           value={transaction.discount}
           onChange={handleInputChange}
           placeholder="Rabat"
-        className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
+          className="block w-full px-4 py-2 border border-gray-300 rounded-lg"
         />
-
+        {errors.discount && <span className="text-red-500 text-sm">{errors.discount}</span>}
-      <input
+      </div>
-        type="text"
-        name="description"
-        value={transaction.description}
-        onChange={handleInputChange}
-        placeholder="Opis"
-        className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
-      />
-
       <button
         onClick={handleSaveChanges}
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 my-3 rounded"
+        className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
       >
         Zapisz zmiany
       </button>

firm/src/components/Harmonogram.js

@@ -1,9 +1,176 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { jwtDecode } from 'jwt-decode';
 
 const Harmonogram = () => {
+  const [workdays, setWorkdays] = useState([]);
+  const [email, setEmail] = useState(null);
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [displayDate, setDisplayDate] = useState(new Date());
+  const [daysInMonth, setDaysInMonth] = useState([]);
+  const [manualDateChange, setManualDateChange] = useState(false);
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      const decodedToken = jwtDecode(token);
+      setEmail(decodedToken.email);
+      fetchWorkdays(decodedToken.email);
+    }
+
+    const interval = setInterval(() => {
+      if (!manualDateChange) { 
+        setCurrentDate(new Date());
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [manualDateChange]);
+
+  const fetchWorkdays = async (email) => {
+    try {
+      const response = await axios.get(`https://localhost:7039/api/Workday/user/${email}/workdays`, {
+        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
+      });
+      setWorkdays(response.data);
+    } catch (error) {
+      console.error('Błąd podczas pobierania dni roboczych:', error);
+    }
+  };
+
+  const handleStartWorkday = async (date) => {
+
+    const token = localStorage.getItem('token');
+    if (!token) {
+      alert('Brak tokena. Użytkownik musi być zalogowany.');
+      return;
+    }
+
+    try {
+      await axios.post(
+        'https://localhost:7039/api/workday/start',
+        { date },
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        }
+      );
+      alert('Dzień roboczy rozpoczęty!');
+      fetchWorkdays(email);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const isWorkday = (date) => {
+    return workdays.includes(date);
+  };
+
+  const formatTime = (date) => {
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const seconds = date.getSeconds().toString().padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+  };
+
+  const formatDayOfWeek = (date) => {
+    const daysOfWeek = ['Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota', 'Niedziela'];
+    return daysOfWeek[date.getDay() === 0 ? 6 : date.getDay() - 1];
+  };
+
+  const formatDate = (date) => {
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear();
+    return `${day}-${month}-${year}`;
+  };
+
+  const generateDaysInMonth = () => {
+    const firstDayOfMonth = new Date(displayDate.getFullYear(), displayDate.getMonth(), 1);
+    const lastDayOfMonth = new Date(displayDate.getFullYear(), displayDate.getMonth() + 1, 0);
+  
+    const firstDayWeekday = (firstDayOfMonth.getDay() === 0 ? 6 : firstDayOfMonth.getDay() - 1);
+    const numberOfDaysInMonth = lastDayOfMonth.getDate();
+  
+    const days = [];
+    for (let i = 0; i < firstDayWeekday; i++) {
+      days.push(null);
+    }
+  
+    for (let i = 1; i <= numberOfDaysInMonth; i++) {
+      days.push(i);
+    }
+  
+    setDaysInMonth(days);
+  };
+
+  useEffect(() => {
+    generateDaysInMonth();
+  }, [displayDate]);
+
+  const changeMonth = (direction) => {
+    setManualDateChange(true);
+    const newDate = new Date(displayDate);
+    if (direction === 'previous') {
+      newDate.setMonth(displayDate.getMonth() - 1);
+    } else if (direction === 'next') {
+      newDate.setMonth(displayDate.getMonth() + 1);
+    }
+    setDisplayDate(newDate);
+    setTimeout(() => setManualDateChange(false), 1000);
+  };
+
+  const formatMonth = (monthIndex) => {
+    const months = [
+      'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
+      'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
+    ];
+    return months[monthIndex];
+  };
+
   return (
-    <div>
+  <div className="container mx-auto px-4 py-6">
-      <h1>Harmonogram</h1>
+    <div className="flex justify-between items-center mb-6">
+      <div className="text-lg font-semibold">
+        <p>{formatDate(currentDate)} - {formatDayOfWeek(currentDate)}</p>
+        <p>{formatTime(currentDate)}</p>
+      </div>
+    </div>
+
+    <div className="flex justify-between items-center mb-4">
+      <button 
+        className="bg-blue-500 text-white py-2 px-4 rounded"
+        onClick={() => changeMonth('previous')}
+      >
+        Poprzedni miesiąc
+      </button>
+      <h2 className="text-2xl font-bold">{formatMonth(displayDate.getMonth())} {displayDate.getFullYear()}</h2>
+      <button 
+        className="bg-blue-500 text-white py-2 px-4 rounded"
+        onClick={() => changeMonth('next')}
+      >
+        Następny miesiąc
+      </button>
+    </div>
+
+    <div className="grid grid-cols-7 gap-4">
+      {['P', 'W', 'Ś', 'C', 'P', 'S', 'N'].map((day, index) => (
+        <div key={index} className="text-center font-semibold">{day}</div>
+      ))}
+      {daysInMonth.map((day, index) => (
+        <div
+          key={index}
+          className={`text-center py-5 rounded-lg ${day ? 'cursor-pointer' : 'text-transparent'} 
+          ${day && 'bg-gray-200 hover:bg-gray-300 transition duration-150 ease-in-out'} 
+          ${isWorkday(formatDate(new Date(displayDate.getFullYear(), displayDate.getMonth(), day))) && 'bg-green-200'}`}
+          style={{
+            boxShadow: day ? '0 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
+          }}
+          onClick={() => day && handleStartWorkday(new Date(displayDate.getFullYear(), displayDate.getMonth(), day))}
+        >
+          {day}
+        </div>
+      ))}
+    </div>
   </div>
   );
 };

firm/src/components/ListaProduktów.js

@@ -81,7 +81,7 @@ const ListaProduktow = ({ onAdd }) => {
                 <td className="p-2 border">{product.name}</td>
                 <td className="p-2 border">{product.description}</td>
                 <td className="p-2 border">{parseFloat(product.price).toFixed(2)}</td>
-                <td className="p-2 border">{product.availability}</td>
+                <td className="p-2 border">{product.type === 0 ? "" : product.availability}</td>
                 <td className="p-2 border">
                   <button
                     onClick={() => handleEditProduct(product.id)}

firm/src/components/NavBar.js

@@ -16,7 +16,7 @@ const Navbar = ({ setToken }) => {
   };
 
   return (
-    <div className="flex items-center justify-between bg-gray-300 p-7 h-16">
+    <div className="flex items-center justify-between bg-gray-300 p-7 h-16 top-0">
       <div className="flex items-center flex-shrink-0 text-black mr-6">
         <Link to="/" className="text-2xl font-customFont font-bold tracking-wide">FIRMTRACKER</Link>
       </div>

firm/src/components/Sidebar.js

@@ -9,8 +9,8 @@ import raportyIcon from "../icons/raport.png";
 
 const Sidebar = ({ userRole }) => {
     return (
-        <div className="bg-gray-200 h-screen flex justify-center marign-0 w-max">
+        <div className="bg-gray-200 h-screen flex-grow justify-center w-max sticky top-0 z-0">
-          <ul className="">
+          <ul>
             {userRole !== 'User' && (
                 <>
                   <Link to="/panel" className="text-black px-10 py-2 block font-customFont text-center w-max">
@@ -53,4 +53,5 @@ const Sidebar = ({ userRole }) => {
         </div>
     );
 }
+
 export default Sidebar;