text: import CardPageVisits from "components/Cards/CardPageVisits";
  import CardSocialTraffic from "components/Cards/CardSocialTraffic";
  import CardStats from "components/Cards/CardStats";
  import React from "react";
  import { useHistory } from "react-router";
  
  const HomeScreen = ({ usersData = [], officersData = [], accessCreated = [] }) => {
    let history = useHistory();
    const residents = usersData.filter((user) => user?.userGroup === "residents");
    const residentsOnboarded = residents.filter((user) => user?.userSignedIn);
    const officers = officersData;
    const officersOnboarded = officers.filter((user) => user?.userSignedIn);
  
    const pending = accessCreated.filter((access) => access?.verified === false);
    const granted = accessCreated.filter((access) => access?.confirmRejectStatus === "granted");
    const denied = accessCreated.filter((access) => access?.confirmRejectStatus === "denied");
  
    return (
      <div className="relative bg-gray-50 p-6 min-h-screen">
        <div className="mx-auto w-full h-full">
          <div>
            {/* Card stats */}
            <div className="flex flex-wrap">
              <div
                className="w-full lg:w-6/12 xl:w-3/12 px-4 mb-4 cursor-pointer"
                onClick={() => {
                  history.push("/residents");
                }}
              >
                <CardStats
                  statSubtitle="RESIDENTS ADDED"
                  statTitle={`${residents?.length}`}
                  statArrow="up"
                  statPercent="3.48"
                  statPercentColor="text-green-600"
                  statDescripiron="Since last month"
                  statIconName="fas fa-users"
                  statIconColor="bg-red-500"
                />
              </div>
  
              <div
                className="w-full lg:w-6/12 xl:w-3/12 px-4 mb-4 cursor-pointer"
                onClick={() => {
                  history.push("/residents");
                }}
              >
                <CardStats
                  statSubtitle="RESIDENTS ONBOARDED"
                  statTitle={`${residentsOnboarded?.length}`}
                  statArrow="up"
                  statPercent="3.48"
                  statPercentColor="text-green-600"
                  statDescripiron="Since last month"
                  statIconName="fas fa-users"
                  statIconColor="bg-green-500"
                />
              </div>
  
              <div
                className="w-full lg:w-6/12 xl:w-3/12 px-4 mb-4  cursor-pointer"
                onClick={() => {
                  history.push("/access-codes");
                }}
              >
                <CardStats
                  statSubtitle="ACCESS CREATED"
                  statTitle={`${accessCreated?.length}`}
                  statArrow="down"
                  statPercent="3.48"
                  statPercentColor="text-red-500"
                  statDescripiron="Since last week"
                  statIconName="fas fa-lock"
                  statIconColor="bg-indigo-500"
                />
              </div>
              <div
                className="w-full lg:w-6/12 xl:w-3/12 px-4 mb-4  cursor-pointer"
                onClick={() => {
                  history.push("/access-codes");
                }}
              >
                <CardStats
                  statSubtitle="ACCESS PENDING VERIFICATION"
                  statTitle={`${pending?.length}`}
                  statArrow="down"
                  statPercent="1.10"
                  statPercentColor="text-yellow-500"
                  statDescripiron="Since yesterday"
                  statIconName="fas fa-lock"
                  statIconColor="bg-yellow-500"
                />
              </div>
  
              <div
                className="w-full lg:w-6/12 xl:w-3/12 px-4 mb-4 cursor-pointer"
                onClick={() => {
                  history.push("/officers");
                }}
              >
                <CardStats
                  statSubtitle="OFFICERS ADDED"
                  statTitle={`${officers?.length}`}
                  statArrow="up"
                  statPercent="3.48"
                  statPercentColor="text-green-600"
                  statDescripiron="Since last month"
                  statIconName="fas fa-user-secret"
                  statIconColor="bg-blue-500"
                />
              </div>
              <div
                className="w-full lg:w-6/12 xl:w-3/12 px-4 mb-4 cursor-pointer"
                onClick={() => {
                  history.push("/officers");
                }}
              >
                <CardStats
                  statSubtitle="OFFICERS ONBOARDED"
                  statTitle={`${officersOnboarded?.length}`}
                  statArrow="up"
                  statPercent="3.48"
                  statPercentColor="text-green-600"
                  statDescripiron="Since last month"
                  statIconName="fas fa-user-secret"
                  statIconColor="bg-green-500"
                />
              </div>
  
              <div
                className="w-full lg:w-6/12 xl:w-3/12 px-4 mb-4  cursor-pointer"
                onClick={() => {
                  history.push("/access-codes");
                }}
              >
                <CardStats
                  statSubtitle="ACCESS GRANTED"
                  statTitle={`${granted?.length}`}
                  statArrow="down"
                  statPercent="1.10"
                  statPercentColor="text-yellow-500"
                  statDescripiron="Since yesterday"
                  statIconName="fas fa-lock"
                  statIconColor="bg-green-500"
                />
              </div>
              <div
                className="w-full lg:w-6/12 xl:w-3/12 px-4 mb-4  cursor-pointer"
                onClick={() => {
                  history.push("/access-codes");
                }}
              >
                <CardStats
                  statSubtitle="ACCESS DENIED"
                  statTitle={`${denied?.length}`}
                  statArrow="up"
                  statPercent="12"
                  statPercentColor="text-green-500"
                  statDescripiron="Since last month"
                  statIconName="fas fa-lock"
                  statIconColor="bg-red-500"
                />
              </div>
            </div>
          </div>
  
          <div className="flex flex-wrap mt-4">
            <div className="w-full xl:w-6/12 mb-12 xl:mb-0 px-4">
              <CardPageVisits accessCreated={accessCreated} />
            </div>
            <div className="w-full xl:w-6/12 px-4">
              <CardSocialTraffic accessCreated={accessCreated} />
            </div>
          </div>
        </div>
      </div>
    );
  };
  
  export default HomeScreen;
  