Displaying ZKT biometric device check-ins from SQL database in React app using .NET Core backend

Question

I have a ZKT biometric device that reads employee fingerprints and faces. The device is directly connected to an SQL database. Whenever an employee checks in, the record is saved in the CHECKINOUT table in the database.

I have a .NET Core application with a React frontend. I want to display the employee check-ins from the SQL database on a checked page in my React app. However, I'm unsure how to achieve this because the frontend doesn't have direct knowledge of the check-ins stored in the SQL database.

Could you please provide guidance or a solution on how I can achieve the desired functionality? Specifically, how can I retrieve the check-in records from the SQL database in my .NET Core backend and send them to my React frontend for display? I Have Tried to use SignalR But its not working

using MediatR;
using Microsoft.AspNetCore.SignalR;
using Application.FDS.FDS;

namespace API.SignalR
{
    public class CheckHub : Hub
    {
        private readonly IMediator _mediator;
        private IHttpContextAccessor _httpContextAccessor;
        public CheckHub(IMediator mediator, IHttpContextAccessor httpContextAccessor)
        {
            _mediator = mediator;
            _httpContextAccessor = httpContextAccessor;
        }

        public override async Task OnConnectedAsync()
        {
            string userID = Context.GetHttpContext()?.Request.Query["userId"];

            var command = new Create.Command()
            {
                EmployeeCardNo = "",
               
            };

            var result = await _mediator.Send(command);
            await Clients.All.SendAsync("ReceiveCheck", result);
        }

        

    }
}

Mediator Create Command

using Application.FDS.EmployeeCRUD;


namespace Application.FDS.FDS
{
    public class Creates
    {
        public class Command : IRequest<Result<ResultDto>>
        {          
            public string EmployeeCardNo { get; set; }


        }

        public class Handler : IRequestHandler<Command, Result<ResultDto>>
        {
            private readonly IUserAccessor _userAccessor;
            private readonly DataContext _context;
            private readonly IMapper _mapper;
            public Handler(DataContext context, IUserAccessor userAccessor, IMapper mapper)
            {
                _mapper = mapper;
                _context = context;
                _userAccessor = userAccessor;
            }

            public async Task<Result<ResultDto>> Handle(Command request, CancellationToken cancellationToken)
            {
                var dateNow = DateTime.Today;
                var employeeList = new EmployeeListDto();
                var checkInOut = new CHECKINOUT();
                int USERID = 0;

                checkInOut = await _context.CHECKINOUT
                 .Where(c =>
                   c.CHECKTIME.Date == dateNow &&
                   c.IsChecked == false
                 ).OrderBy(x => x.CheckID)
                 .FirstOrDefaultAsync();

                if (checkInOut != null)
                {
                    USERID = checkInOut.USERID;

                    ///Get the USERID From CHECKINOUT Table
                    employeeList = await _context.Employees.FirstOrDefaultAsync(x =>x.EmployeeID == USERID);
                }
                else
                {
                    return Result<ResultDto>.Failure("Code01");
                }

                  var dto = new ResultDto();
                  dto.EmployeeID=employeeList.EmployeeID;
                  dto.EmployeeName=employeeList.NameE;


                //Return the Dto And Inside Dto IsAllowed Or not Mentioned
                return Result<ResultDto>.Success(dto);
            }

        }
    }
}

Dto

namespace Application.FDS.FDS
{
    public class ResultDto
    {
        public string EmployeeID { get; set; }
        public string EmployeeName { get; set; }

    }
}

CHECKINOUT Table

namespace Domain
{
    public partial class CHECKINOUT
    {
        [Key]
        public int USERID { get; set; }
        [Key]
        public DateTime CHECKTIME { get; set; }
        public string CHECKTYPE { get; set; }
        public int? VERIFYCODE { get; set; }
        public string SENSORID { get; set; }
        public long CheckID { get; set; }
        public bool IsChecked { get; set; }
    }
}

Program.cs

app.MapHub<CheckHub>("/check");

And This the React Code whem I Load the Component it work and send the First Request but when i Checkin in the Device the Code in React to check again for Checkin not send the request

  const [checkIns, setCheckIns] = useState<any>();
  useEffect(() => {
    // Create a SignalR connection
    const connection = new signalR.HubConnectionBuilder()
      .withUrl(http://localhost:5000/check + `/?userId=123`)
      .withAutomaticReconnect()
      .build();

    // Listen for real-time updates
    connection.on('ReceiveCheck', (checkIn) => {
      setCheckIns(checkIn);
    });

    // Start the SignalR connection
    const startSignalRConnection = async () => {
      try {
        // Start the SignalR connection
        await connection.start();

       
      } catch (error) {
        console.error('SignalR connection error: ', error);
      }
    };

    // Start the SignalR connection
    startSignalRConnection();

    // Clean up the SignalR connection on component unmount
    return () => {
      connection.stop();
    };
  }, []);