web-humas-fe/components/landing/drawer.tsx

"use client";
import { Button } from "@heroui/button";

import {
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerHeader,
  useDisclosure,
} from "@heroui/react";
import { ChevronDownIcon, LandingAnalyticIcon, UserIcon } from "../icons";
import { MasterUsersIcon } from "../icons/sidebar-icon";
import Image from "next/image";
import { useEffect, useState } from "react";
import { getActivity } from "@/service/activity-log";

interface Activity {
  totalVisitorAllTime: number;
  totalVisitorToday: number;
  totalViewAllTime: number;
}

export default function AnalyticDrawer() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();
  const [activity, setActivity] = useState<Activity>({
    totalVisitorAllTime: 0,
    totalVisitorToday: 0,
    totalViewAllTime: 0,
  });

  useEffect(() => {
    initFetch();
  }, []);

  const initFetch = async () => {
    const res = await getActivity();
    if (res?.error) {
      return false;
    }

    setActivity(res?.data?.data);

    return false;
  };

  return (
    <>
      <div className="fixed bottom-1/3 -translate-y-1/2 right-4 lg:right-9 z-50">
        <Button
          className="lg:hidden rotate-90 origin-right rounded-b-md rounded-t-none flex flex-row items-center gap-2 text-white bg-red-600 font-semibold"
          onPress={onOpen}
          size="sm"
        >
          <div className="bg-red-950 p-1 rounded-full">
            <ChevronDownIcon size={12} />
          </div>{" "}
          Statistik Kunjungan
        </Button>
        <Button
          className="hidden lg:flex rotate-90 origin-right rounded-b-md rounded-t-none flex-row items-center gap-2 text-white bg-red-600 font-semibold"
          onPress={onOpen}
        >
          <div className="bg-red-950 p-1 rounded-full">
            <ChevronDownIcon size={12} />
          </div>{" "}
          Statistik Kunjungan
        </Button>
      </div>
      <Drawer
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        motionProps={{
          variants: {
            enter: {
              opacity: 1,
              x: 0,
            },
            exit: {
              x: 100,
              opacity: 0,
            },
          },
        }}
        className="h-[540px] bg-[#BE0106] text-white"
        size="sm"
      >
        <DrawerContent>
          {(onClose) => (
            <>
              <DrawerHeader className="flex flex-col gap-1 ">
                <p className="text-xl font-semibold"> Statistik Kunjungan</p>
                <p className="text-sm font-light">
                  Perhitungan jumlah kunjugan website
                </p>
              </DrawerHeader>
              <DrawerBody className="flex flex-col gap-3">
                <div className="flex flex-col gap-3 pl-10 pr-4 py-4 bg-[#671B1D] rounded-lg">
                  <div className="flex justify-between items-center">
                    <div className="flex flex-col gap-2">
                      <div className="bg-[#BE0106] rounded-md w-fit py-1 px-1.5">
                        <MasterUsersIcon size={14} />
                      </div>
                      <p className="font-light">Total visitor</p>
                    </div>
                    <Image
                      src="/tribrata.png"
                      width={360}
                      height={360}
                      alt="logo"
                      className="w-[80px] opacity-30"
                    />
                  </div>
                  <p className="text-5xl font-semibold leading-0 tracking-wide">
                    {activity.totalVisitorAllTime}
                  </p>
                  <div className="flex flex-row gap-3 bg-[#BE0106] py-1 px-2 rounded-md items-center w-fit text-sm font-light">
                    <div className="w-2 h-2 bg-success-600 rounded-full"></div>
                    <p>{activity.totalVisitorToday} Online</p>
                  </div>
                </div>
                <div className="flex flex-col gap-3 pl-10 pr-4 pt-4 pb-10 bg-[#671B1D] rounded-lg">
                  <div className="flex justify-between items-center">
                    <div className="flex flex-col gap-2">
                      <div className="bg-[#BE0106] rounded-md w-fit py-1 px-1.5">
                        <LandingAnalyticIcon size={14} />
                      </div>
                      <p className="font-light">Total View</p>
                    </div>
                    <Image
                      src="/tribrata.png"
                      width={360}
                      height={360}
                      alt="logo"
                      className="w-[80px] opacity-30"
                    />
                  </div>
                  <p className="text-5xl font-semibold leading-0 tracking-wide">
                    {activity.totalViewAllTime}
                  </p>
                </div>
              </DrawerBody>
            </>
          )}
        </DrawerContent>
      </Drawer>
    </>
  );
}