Welcome to the Home Dashboard

/*-eslint-disable-@typescript-eslint/no-explicit-any-*/-import-{-useEffect,-useMemo,-useState-}-from-"react";-import-Earth-from-"../assets/home-card-icons/Earth";-import-Brand-from-"../assets/home-card-icons/Brand";-import-Sku-from-"../assets/home-card-icons/Sku";-import-SkuCard-from-"../components/user/SkuCard";-import-SkuCounter-from-"../components/user/SkuCounter";-import-Tshirt-from-"../assets/home-card-icons/sku/Tshirt";-import-ActiveWear-from-"../assets/home-card-icons/sku/ActiveWear";-import-BottomIcon-from-"../assets/home-card-icons/sku/BottomIcon";-import-Denim-from-"../assets/home-card-icons/sku/Denim";-import-DressIcon-from-"../assets/home-card-icons/sku/DressIcon";-import-OuterWear-from-"../assets/home-card-icons/sku/OuterWear";-import-StatisticBox-from-"../components/StatisticBox";-import-{-getStats-}-from-"../service/userAPI";-import-{-GetStatsType-}-from-"../types/APITypes";-//-import-HomeDoughnutChart-from-"../components/user/charts/HomeDoghnutChart";-import-useAuthStore-from-"../store/authStore";-import-AnalysisSkeleton-from-"../components/skeletons/AnalysisSkeleton";-import-{-toTitleCase-}-from-"../utils/helperFunctions";-import-ReactGA-from-"react-ga4";-const-Home-=-()-=>-{-const-categoryIcons:-{-[key:-string]:-React.FC-}-=-useMemo(()-=>-({-activewear:-ActiveWear,-bottoms:-BottomIcon,-denim:-Denim,-dresses:-DressIcon,-other:-Tshirt,-others:-Tshirt,-outerwear:-OuterWear,-tops:-Tshirt,-}),-[]);-const-{-authState-}-=-useAuthStore();-const-user-=-authState.user;-const-[stats,-setStats]-=-useState<GetStatsType>({-category_counts:-[-{-activewear:-0-},-{-bottoms:-0-},-{-denim:-0-},-{-dresses:-0-},-{-other:-0-},-{-others:-0-},-{-outerwear:-0-},-{-tops:-0-},-],-charts:-{-gender:-{-female:-0,-male:-0,-},-product_type:-{-activewear:-0,-bottoms:-0,-denim:-0,-dresses:-0,-other:-0,-others:-0,-outerwear:-0,-tops:-0,-},-},-global_counts:-{-brands:-0,-geography:-0,-products:-0,-},-sku_addition:-{-month:-{-"%change":-0,-count:-0,-},-today:-{-"%change":-0,-count:-0,-},-week:-{-"%change":-0,-count:-0,-},-},-});-useEffect(()-=>-{-//-Set-the-User-ID-when-the-user-logs-in-if-(user-&&-user.id)-{-ReactGA.set({-user_id:-user.id,-user_email:-user.email,-//-Add-custom-data-like-user-email-});-//-Set-the-User-ID-in-Google-Analytics-}-},-[user]);-const-[isLoading,-setIsLoading]-=-useState(true);-useEffect(()-=>-{-ReactGA.send({-hitType:-"pageview",-page:-"/home"-});-getStats()-.then((res)-=>-{-if-(res.status-===-200)-{-ReactGA.event({-category:-'Home-page',-action:-'Visited-Home-Page',-label:-'Home-page-visited',-});-setStats(res.data);-}-})-.catch((err)-=>-{-console.log(err);-})-.finally(()-=>-{-setIsLoading(false);-//-Stop-loading-once-the-data-is-fetched-or-an-error-occurs-});-},-[]);-if-(isLoading)-{-return-(-<>-<AnalysisSkeleton-/>-</>-);-}-return-(-stats-&&-(-<div-className="pl-2-grid-grid-cols-12-gap-[1.5rem]-mr-4">-<h1-className="font-bold-col-span-12-xl:text-xl-md:text-lg-mt-6-2xl:text-xl-ml-2">-Hello,{"-"}-<span-className="font-bold-text-customOrange">-{toTitleCase(user.name)}-</span>-</h1>-<StatisticBox-icon={<Brand-/>}-title={"Brands"}-value={stats?.global_counts?.brands}-/>-<StatisticBox-icon={<Earth-/>}-title={"Countries"}-value={stats?.global_counts?.geography}-/>-<StatisticBox-icon={<Sku-/>}-title={"Total-Products"}-value={stats?.global_counts?.products}-/>-<h1-className="font-medium-leading-[100%]-md:leading-[100%]-col-span-12-text-customOrange-xl:text-xl-md:text-lg-2xl:text-xl-ml-2">-SKU-<span-className="font-medium-text-black">Count-by-category</span>-</h1>-<div-className="col-span-12-pr-2-xl:h-[330px]-md:h-[255px]-2xl:h-[330px]-overflow-y-scroll-custom-scrollbar">-<div-className="grid-grid-cols-8-grid-rows-2-gap-4-p-0">-{stats?.category_counts?.map((category,-index)-=>-{-const-[categoryName]-=-Object.keys(category);-const-Icon-=-categoryIcons[categoryName]-||-Tshirt;-return-<SkuCard-key={index}-data={category}-Icon={Icon}-/>;-})}-</div>-</div>-{/*-<div-className="col-span-4-ml-[12px]-mr-2-mt-2-flex-flex-col-">-<div-className="border-[1px]-border-customBorder-rounded-xl-p-2">-<div-className="border-customBorder-h-1/4-w-full-border-b-[1px]-p-2-flex-items-center">-<div-className="flex-flex-col-w-11/12">-<h1-className="text-lg-font-semibold">{"Gender-Mix"}</h1>-<h3-className="text-sm-text-customGrey">-{"Ratio-of-products-with-gender"}-</h3>-</div>-</div>-<div-className="flex-items-center-h-[250px]">-<HomeDoughnutChart-chartName="Gender-Mix"-data={stats?.charts?.gender-as-any}-/>-</div>-</div>-</div>-*/}-<h1-className="-ml-2-font-medium-text-customOrange-xl:text-xl-md:text-lg-2xl:text-xl-col-span-12">-<span-className="font-medium-text-black">New</span>-Products-</h1>-<div-className="-gap-6-mb-5-col-span-12-flex">-<SkuCounter-data={stats?.sku_addition?.today}-day={"Today"}-/>-<SkuCounter-data={stats?.sku_addition?.week}-day={"Week"}-/>-<SkuCounter-data={stats?.sku_addition?.month}-day={"Month"}-/>-</div>-{/*-<div-className="col-span-4-mr-2-border-[1px]-border-customBorder-rounded-xl-p-2">-<div-className="border-customBorder-h-1/4-w-full-border-b-[1px]-p-2-flex-items-center">-<div-className="flex-flex-col-w-11/12">-<h1-className="text-lg-font-semibold">{"Product-Mix"}</h1>-<h3-className="text-sm-text-customGrey">-{"Ratio-of-product-types"}-</h3>-</div>-</div>-<div-className="flex-items-center-h-[250px]">-<HomeDoughnutChart-chartName="Product-Type"-data={stats?.charts?.product_type-as-any}-/>-</div>-</div>-*/}-<div-className="mt-3-gap-2"></div>-</div>-)-);-};-export-default-Home;-improve-the-design