Надо сделать градинт у карточек поставщиков в зависимости от цвета выбранного виджета
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import styled from 'styled-components';

const SupplierListContainer = styled.div`
  padding: 2rem;
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
`;

const Widget = styled.div`
  width: 50%; 
  margin: 1.5rem 0; 
  padding: 1.5rem;
  border-radius: 10px;
  color: #333; 
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;

  &.current {
    background: linear-gradient(135deg, rgba(144, 238, 144, 0.8) 0%, rgba(173, 255, 47, 0.6) 100%);
  }

  &.noData {
    background: linear-gradient(135deg, rgba(255, 99, 71, 0.8) 0%, rgba(255, 159, 128, 0.6) 100%);
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
  }
`;

const SupplierItem = styled.li`
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(144, 238, 144, 0.8) 0%, rgba(173, 255, 47, 0.6) 100%); /* Градиентный фон */
  color: #333; /* Цвет текста */
  transition: transform 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень для объема */

  &:hover {
    transform: scale(1.02);
  }
`;

const PaginationContainer = styled.div`
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
`;

const SupplierList = () => {
  const [suppliers, setSuppliers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [openWidget, setOpenWidget] = useState(null);
  const userId = localStorage.getItem('userId');

  useEffect(() => {
    const fetchSuppliers = async () => {
      if (!userId) {
        setError('User ID is not available.');
        setLoading(false);
        return;
      }

      try {
        const response = await axios.get(`http://localhost:8080/api/suppliers`);
        setSuppliers(response.data);
      } catch (err) {
        console.error(err);
        setError('Failed to fetch suppliers.');
      } finally {
        setLoading(false);
      }
    };

    fetchSuppliers();
  }, [userId]);

  if (loading) {
    return <div>Загрузка...</div>;
  }

  if (error) {
    return <div>{error}</div>;
  }

  // Фильтрация по userId
  const currentSuppliers = suppliers.filter(supplier => supplier.userId === parseInt(userId));
  const noDataSuppliers = suppliers.filter(supplier => supplier.userId === null);

  return (
    <SupplierListContainer>
      <h2 style={{ marginBottom: '1rem' }}>Список поставщиков</h2>
      <Widget className="current" onClick={() => setOpenWidget(openWidget === 'current' ? null : 'current')}>
        <h3>Поставщики, имеющие связь: {currentSuppliers.length}</h3>
        {openWidget === 'current' && (
          <ul>
            {currentSuppliers.map(supplier => (
              <SupplierItem key={supplier.supplierId}>
                <h3>{supplier.companyName}</h3>
                <p><strong>Контактное лицо:</strong> {supplier.contactPerson}</p>
                <p><strong>Телефон:</strong> {supplier.phoneNumber}</p>
                <p><strong>Email:</strong> {supplier.email}</p>
                <p><strong>Адрес:</strong> {supplier.address}</p>
                <p><strong>Должность:</strong> {supplier.postName} ({supplier.postShortName})</p>
              </SupplierItem>
            ))}
          </ul>
        )}
      </Widget>

      <Widget className="noData" onClick={() => setOpenWidget(openWidget === 'noData' ? null : 'noData')}>
        <h3>Поставщики с отсутствующим userId: {noDataSuppliers.length}</h3>
        {openWidget === 'noData' && (
          <ul>
            {noDataSuppliers.map(supplier => (
              <SupplierItem key={supplier.supplierId}>
                <h3>{supplier.companyName}</h3>
                <p><strong>Контактное лицо:</strong> {supplier.contactPerson}</p>
                <p><strong>Телефон:</strong> {supplier.phoneNumber}</p>
                <p><strong>Email:</strong> {supplier.email}</p>
                <p><strong>Адрес:</strong> {supplier.address}</p>
                <p><strong>Должность:</strong> {supplier.postName} ({supplier.postShortName})</p>
              </SupplierItem>
            ))}
          </ul>
        )}
      </Widget>
    </SupplierListContainer>
  );
};

export default SupplierList;