🏗️ Added stats to dashboard

src/client/components/Dashboard/Dashboard.tsx

@@ -5,7 +5,6 @@ import { WantedComicsList } from "./WantedComicsList";
 import { VolumeGroups } from "./VolumeGroups";
 import { LibraryStatistics } from "./LibraryStatistics";
 import { PullList } from "./PullList";
-import { getLibraryStatistics } from "../../actions/comicinfo.actions";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
@@ -54,16 +53,23 @@ export const Dashboard = (): ReactElement => {
     queryKey: ["volumeGroups"],
   });
 
-  //
-  //   const libraryStatistics = useSelector(
-  //     (state: RootState) => state.comicInfo.libraryStatistics,
-  //   );
+  const { data: statistics } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/libraryStatistics`,
+        method: "GET",
+      }),
+    queryKey: ["libraryStatistics"],
+  });
+
   return (
     <div className="container mx-auto max-w-full">
       <PullList />
       {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
       {/* Wanted comics */}
       <WantedComicsList comics={wantedComics?.data?.docs} />
+      {/* Library Statistics */}
+      {statistics && <LibraryStatistics stats={statistics?.data} />}
       {/* Volume groups */}
       <VolumeGroups volumeGroups={volumeGroups?.data} />
     </div>

src/client/components/Dashboard/LibraryStatistics.tsx

@@ -1,113 +1,99 @@
 import React, { ReactElement, useEffect } from "react";
 import prettyBytes from "pretty-bytes";
 import { isEmpty, isUndefined, map } from "lodash";
+import Header from "../shared/Header";
 
 export const LibraryStatistics = (
   props: ILibraryStatisticsProps,
 ): ReactElement => {
-  // const { stats } = props;
+  const { stats } = props;
   return (
     <div className="mt-5">
-      <h4 className="title is-4">
-        <i className="fa-solid fa-chart-simple"></i> Your Library In Numbers 
-      </h4>
-      <p className="subtitle is-7">A brief snapshot of your library.</p>
-      <div className="columns is-multiline">
-        <div className="column is-narrow is-two-quarter">
-          <dl className="box">
-            <dd className="is-size-4">
-              <span className="has-text-weight-bold">
-                {props.stats.totalDocuments}
-              </span>{" "}
-              files
+      <Header
+        headerContent="Your Library In Numbers"
+        subHeaderContent={
+          <span className="text-md">A brief snapshot of your library.</span>
+        }
+        iconClassNames="fa-solid fa-binoculars mr-2"
+      />
+
+      <div className="mt-3">
+        <div className="flex flex-row gap-5">
+          <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
+            <dt className="text-lg font-medium text-gray-500">Library size</dt>
+            <dd className="text-3xl text-green-600 md:text-5xl">
+              {props.stats.totalDocuments} files
             </dd>
-            <dd className="is-size-4">
-              Library size
-              <span className="has-text-weight-bold">
-                {" "}
+            <dd>
+              <span className="text-2xl text-green-600">
                 {props.stats.comicDirectorySize &&
                   prettyBytes(props.stats.comicDirectorySize)}
               </span>
             </dd>
+          </div>
+          {/* comicinfo and comicvine tagged issues */}
+          <div className="flex flex-col gap-4">
             {!isUndefined(props.stats.statistics) &&
               !isEmpty(props.stats.statistics[0].issues) && (
-                <dd className="is-size-6">
-                  <span className="has-text-weight-bold">
+                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
+                  <span className="text-xl">
                     {props.stats.statistics[0].issues.length}
                   </span>{" "}
                   tagged with ComicVine
-                </dd>
+                </div>
               )}
             {!isUndefined(props.stats.statistics) &&
               !isEmpty(props.stats.statistics[0].issuesWithComicInfoXML) && (
-                <dd className="is-size-6">
-                  <span className="has-text-weight-bold">
+                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
+                  <span className="text-xl">
                     {props.stats.statistics[0].issuesWithComicInfoXML.length}
                   </span>{" "}
-                  with
                   <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
-                    ComicInfo.xml
+                    with ComicInfo.xml
                   </span>
-                </dd>
+                </div>
               )}
-          </dl>
-        </div>
+          </div>
 
-        <div className="p-3 column is-one-quarter">
-          <dl className="box">
-            <dd className="is-size-6">
-              <span className="has-text-weight-bold"></span> Issues
-            </dd>
-            <dd className="is-size-6">
-              <span className="has-text-weight-bold">304</span> Volumes
-            </dd>
-            <dd className="is-size-6">
-              {!isUndefined(props.stats.statistics) &&
-                !isEmpty(props.stats.statistics[0].fileTypes) &&
-                map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
-                  return (
-                    <span key={idx}>
-                      <span className="has-text-weight-bold">
-                        {fileType.data.length}
-                      </span>
-                      <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
-                        {fileType._id}
-                      </span>
-                    </span>
-                  );
-                })}
-            </dd>
-          </dl>
-        </div>
+          <div className="">
+            {!isUndefined(props.stats.statistics) &&
+              !isEmpty(props.stats.statistics[0].fileTypes) &&
+              map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
+                return (
+                  <span
+                    key={idx}
+                    className="flex flex-col mb-4 h-fit text-xl rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center"
+                  >
+                    {fileType.data.length} {fileType._id}
+                  </span>
+                );
+              })}
+          </div>
 
-        {/* file types */}
-        <div className="p-3 column is-two-fifths">
-          {/* publisher with most issues */}
-          <dl className="box">
+          {/* file types */}
+          <div className="flex flex-col h-fit text-lg rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3">
+            {/* publisher with most issues */}
             {!isUndefined(props.stats.statistics) &&
               !isEmpty(
                 props.stats.statistics[0].publisherWithMostComicsInLibrary[0],
               ) && (
-                <dd className="is-size-6">
-                  <span className="has-text-weight-bold">
+                <>
+                  <span className="">
                     {
                       props.stats.statistics[0]
                         .publisherWithMostComicsInLibrary[0]._id
                     }
                   </span>
                   {" has the most issues "}
-                  <span className="has-text-weight-bold">
+                  <span className="">
                     {
                       props.stats.statistics[0]
                         .publisherWithMostComicsInLibrary[0].count
                     }
                   </span>
-                </dd>
+                </>
               )}
-            <dd className="is-size-6">
-              <span className="has-text-weight-bold">304</span> Volumes
-            </dd>
-          </dl>
+          </div>
         </div>
       </div>
     </div>

src/client/components/Dashboard/PullList.tsx

@@ -82,7 +82,17 @@ export const PullList = (): ReactElement => {
       <div className="content">
         <Header
           headerContent="Discover"
-          subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
+          subHeaderContent={
+            <span className="text-md">
+              Pull List aggregated for the week from{" "}
+              <span className="underline">
+                <a href="https://leagueofcomicgeeks.com/comics/new-comics">
+                  League Of Comic Geeks
+                </a>
+                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
+              </span>
+            </span>
+          }
           iconClassNames="fa-solid fa-binoculars mr-2"
           link="/pull-list/all/"
         />
@@ -101,7 +111,10 @@ export const PullList = (): ReactElement => {
                     />
                     {inputValue && (
                       <div className="text-sm">
-                        Showing pull list for <span>{inputValue}</span>
+                        Showing pull list for{" "}
+                        <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          {inputValue}
+                        </span>
                       </div>
                     )}
                   </div>

src/client/components/shared/Header.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 type IHeaderProps = {
   headerContent: string;
-  subHeaderContent: string;
+  subHeaderContent: ReactElement;
   iconClassNames: string;
   link?: string;
 };