🏗️ Continued refactoring of PullList, Volumes etc.

2024-02-04 21:58:15 -05:00
parent d8a45408cb
commit 5873721308
15 changed files with 563 additions and 377 deletions
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
    "@fortawesome/fontawesome-free": "^6.3.0",
+    "@popperjs/core": "^2.11.8",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@tanstack/react-query": "^5.0.5",
    "@tanstack/react-table": "^8.9.3",
@@ -37,6 +38,7 @@
    "filename-parser": "^1.0.2",
    "final-form": "^4.20.2",
    "final-form-arrays": "^3.0.2",
+    "focus-trap-react": "^10.2.3",
    "history": "^5.3.0",
    "html-to-text": "^8.1.0",
    "immer": "^10.0.3",
@@ -49,13 +51,14 @@
    "react": "^18.2.0",
    "react-collapsible": "^2.9.0",
    "react-comic-viewer": "^0.4.0",
-    "react-day-picker": "^8.6.0",
+    "react-day-picker": "^8.10.0",
    "react-dom": "^18.2.0",
    "react-fast-compare": "^3.2.0",
    "react-final-form": "^6.5.9",
    "react-final-form-arrays": "^3.1.4",
    "react-loader-spinner": "^4.0.0",
    "react-modal": "^3.15.1",
+    "react-popper": "^2.3.0",
    "react-router": "^6.9.0",
    "react-router-dom": "^6.9.0",
    "react-select": "^5.8.0",
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -6,14 +6,9 @@ import { VolumeGroups } from "./VolumeGroups";
 import { LibraryStatistics } from "./LibraryStatistics";
 import { PullList } from "./PullList";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
-import { isEmpty, isNil, isUndefined } from "lodash";
-import Header from "../shared/Header";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import {
-  LIBRARY_SERVICE_BASE_URI,
-  LIBRARY_SERVICE_HOST,
-} from "../../constants/endpoints";
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";

 export const Dashboard = (): ReactElement => {
  const { data: recentComics } = useQuery({
@@ -65,9 +60,7 @@ export const Dashboard = (): ReactElement => {
  //   );
  return (
    <div className="container mx-auto max-w-full">
-      <h1>Dashboard</h1>
      <PullList />
-
      {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
      {/* Wanted comics */}
      <WantedComicsList comics={wantedComics?.data?.docs} />
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -1,10 +1,11 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useState } from "react";
 import { map } from "lodash";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
 import { importToDB } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
 import { Link } from "react-router-dom";
+
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
 import { setupCache } from "axios-cache-interceptor";
@@ -12,6 +13,8 @@ import { useQuery } from "@tanstack/react-query";
 import "keen-slider/keen-slider.min.css";
 import { useKeenSlider } from "keen-slider/react";
 import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
+import { Field, Form } from "react-final-form";
+import DatePickerDialog from "../shared/DatePicker";

 type PullListProps = {
  issues: any;
@@ -24,6 +27,13 @@ const http = rateLimiter(axios.create(), {
 });
 const cachedAxios = setupCache(axios);
 export const PullList = (): ReactElement => {
+  // datepicker
+  const [selected, setSelected] = useState<Date>();
+  let footer = <p>Please pick a day.</p>;
+  if (selected) {
+    footer = <p>You picked {format(selected, "PP")}.</p>;
+  }
+
  // keen slider
  const [sliderRef, instanceRef] = useKeenSlider(
    {
@@ -47,15 +57,15 @@ export const PullList = (): ReactElement => {
    data: pullList,
    isSuccess,
    isLoading,
+    isError,
  } = useQuery({
-    queryFn: async () =>
+    queryFn: async (): any =>
      await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
        method: "get",
-        params: { startDate: "2024-2-15", pageSize: "15", currentPage: "1" },
+        params: { startDate: "2024-2-20", pageSize: "15", currentPage: "1" },
      }),
    queryKey: ["pullList"],
  });
-  console.log(pullList?.data.result);
  const addToLibrary = (sourceName: string, locgMetadata) =>
    importToDB(sourceName, { locg: locgMetadata });

@@ -65,6 +75,7 @@ export const PullList = (): ReactElement => {
  const previous = () => {
    // sliderRef.slickPrev();
  };
+
  return (
    <>
      <div className="content">
@@ -73,22 +84,28 @@ export const PullList = (): ReactElement => {
          subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
          iconClassNames="fa-solid fa-binoculars mr-2"
        />
-        <div className="field is-grouped">
+        <div className="flex flex-row gap-5 mb-5">
          {/* select week */}
-          <div className="control">
-            <div className="select is-small">
-              <select>
-                <option>Select Week</option>
-                <option>With options</option>
-              </select>
+          <div className="flex flex-row gap-4 my-3">
+            <Form
+              onSubmit={() => {}}
+              render={({ handleSubmit }) => (
+                <form>
+                  {/* week selection for pull list */}
+
+                  <DatePickerDialog />
+                </form>
+              )}
+            />
+            <div>
+              {/* See all pull list issues */}
+              <Link to={"/pull-list/all/"}>
+                <button className="flex space-x-1 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500">
+                  View all issues
+                </button>
+              </Link>
            </div>
          </div>
-          {/* See all pull list issues */}
-          <div className="control">
-            <Link to={"/pull-list/all/"}>
-              <button className="button is-small">View all issues</button>
-            </Link>
-          </div>
        </div>
      </div>

@@ -103,14 +120,19 @@ export const PullList = (): ReactElement => {
                  hasDetails
                  title={ellipsize(issue.name, 25)}
                >
-                  <div className="px-1 py-1">
-                    <span className="text-xs ">{issue.publisher}</span>
-                    <button
-                      className=""
-                      onClick={() => addToLibrary("locg", issue)}
-                    >
-                      Want
-                    </button>
+                  <div className="px-1">
+                    <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">
+                      {issue.publisher}
+                    </span>
+                    <div className="flex flex-row justify-end">
+                      <button
+                        className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                        onClick={() => addToLibrary("locg", issue)}
+                      >
+                        <i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
+                        Want
+                      </button>
+                    </div>
                  </div>
                </Card>
              </div>
@@ -118,6 +140,10 @@ export const PullList = (): ReactElement => {
          })}
        </div>
      )}
+      {isLoading ? <div>Loading...</div> : null}
+      {isError ? (
+        <div>An error occurred while retrieving the pull list.</div>
+      ) : null}
    </>
  );
 };
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/src/client/components/Dashboard/VolumeGroups.tsx
@@ -19,6 +19,7 @@ export const VolumeGroups = (props): ReactElement => {
        headerContent="Volumes"
        subHeaderContent="Based on ComicVine Volume information"
        iconClassNames="fa-solid fa-binoculars mr-2"
+        link={"/volumes"}
      />
      <div className="grid grid-cols-5 gap-6 mt-3">
        {map(deduplicatedGroups, (data) => {
@@ -36,7 +37,7 @@ export const VolumeGroups = (props): ReactElement => {
                      {ellipsize(data.volumes.name, 48)}
                    </Link>
                  </div>
-
+                  {/* issue count */}
                  <span className="inline-flex mt-1 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
                    <span className="pr-1 pt-1">
                      <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/src/client/components/Dashboard/WantedComicsList.tsx
@@ -15,15 +15,14 @@ export const WantedComicsList = ({
  comics,
 }: WantedComicsListProps): ReactElement => {
  const navigate = useNavigate();
-  const navigateToWantedComics = (row) => {
-    navigate(`/wanted/all`);
-  };
+
  return (
    <>
      <Header
        headerContent="Wanted Comics"
        subHeaderContent="Comics marked as wanted from various sources"
        iconClassNames="fa-solid fa-binoculars mr-2"
+        link={"/wanted"}
      />
      <div className="grid grid-cols-5 gap-6 mt-3">
        {map(
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -248,7 +248,7 @@ export const Library = (): ReactElement => {
    <div>
      <section>
        <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
            <div className="sm:flex sm:items-center sm:justify-between">
              <div className="text-center sm:text-left">
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
--- a/src/client/components/Search/Search.tsx
+++ b/src/client/components/Search/Search.tsx
@@ -26,7 +26,6 @@ export const Search = ({}: ISearchProps): ReactElement => {
  const [searchQuery, setSearchQuery] = useState("");
  const [comicVineMetadata, setComicVineMetadata] = useState({});
  const getCVSearchResults = (searchQuery) => {
-    console.log(searchQuery);
    setSearchQuery(searchQuery.search);
    // queryClient.invalidateQueries({ queryKey: ["comicvineSearchResults"] });
  };
@@ -84,7 +83,6 @@ export const Search = ({}: ISearchProps): ReactElement => {
    enabled: !isNil(comicVineMetadata.comicData),
  });

-  console.log(comicVineMetadata);
  const addToLibrary = (sourceName: string, comicData) =>
    setComicVineMetadata({ sourceName, comicData });

@@ -93,11 +91,24 @@ export const Search = ({}: ISearchProps): ReactElement => {
  };

  return (
-    <>
-      <section className="container">
-        <div className="">
-          <h1 className="">Search</h1>
+    <div>
+      <section>
+        <header className="bg-slate-200 dark:bg-slate-500">
+          <div className="px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="text-center sm:text-left">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
+                  Search
+                </h1>

+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Browse your comic book collection.
+                </p>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div className="mx-auto max-w-screen-sm px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
          <Form
            onSubmit={getCVSearchResults}
            initialValues={{
@@ -105,116 +116,129 @@ export const Search = ({}: ISearchProps): ReactElement => {
            }}
            render={({ handleSubmit, form, submitting, pristine, values }) => (
              <form onSubmit={handleSubmit}>
-                <div>
-                  <Field name="search">
-                    {({ input, meta }) => {
-                      return (
-                        <input
-                          {...input}
-                          className="input main-search-bar is-large"
-                          placeholder="Type an issue/volume name"
-                        />
-                      );
-                    }}
-                  </Field>
-                </div>
-                <div className="column">
-                  <button type="submit" className="button is-medium">
+                <div className="flex flex-row w-full">
+                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
+                    <div className="w-10 text-gray-400">
+                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
+                    </div>
+
+                    <Field name="search">
+                      {({ input, meta }) => {
+                        return (
+                          <input
+                            {...input}
+                            className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
+                            placeholder="Type an issue/volume name"
+                          />
+                        );
+                      }}
+                    </Field>
+                  </div>
+
+                  <button
+                    className="sm:mt-0 rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                    type="submit"
+                  >
                    Search
                  </button>
                </div>
              </form>
            )}
          />
-          {!isNil(comicVineSearchResults?.data.results) &&
-          !isEmpty(comicVineSearchResults?.data.results) ? (
-            <div className="">
-              {comicVineSearchResults.data.results.map((result) => {
-                return isSuccess ? (
-                  <div key={result.id} className="mb-5">
-                    <div className="flex flex-row">
-                      <div className="mr-5">
-                        <Card
-                          key={result.id}
-                          orientation={"cover-only"}
-                          imageUrl={result.image.small_url}
-                          hasDetails={false}
-                        />
+        </div>
+        {!isNil(comicVineSearchResults?.data.results) &&
+        !isEmpty(comicVineSearchResults?.data.results) ? (
+          <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
+            {comicVineSearchResults.data.results.map((result) => {
+              return isSuccess ? (
+                <div key={result.id} className="mb-5">
+                  <div className="flex flex-row">
+                    <div className="mr-5">
+                      <Card
+                        key={result.id}
+                        orientation={"cover-only"}
+                        imageUrl={result.image.small_url}
+                        hasDetails={false}
+                      />
+                    </div>
+                    <div className="column">
+                      <div className="text-xl">
+                        {!isEmpty(result.volume.name) ? (
+                          result.volume.name
+                        ) : (
+                          <span className="is-size-3">No Name</span>
+                        )}
                      </div>
-                      <div className="column">
-                        <div className="text-xl">
-                          {!isEmpty(result.volume.name) ? (
-                            result.volume.name
-                          ) : (
-                            <span className="is-size-3">No Name</span>
-                          )}
-                        </div>
-                        <div className="field is-grouped mt-1">
-                          <div className="control">
-                            <div className="tags has-addons">
-                              <span className="tag is-light">Cover date</span>
-                              <span className="tag is-info is-light">
-                                {dayjs(result.cover_date).format("MMM D, YYYY")}
-                              </span>
-                            </div>
-                          </div>
-
-                          <div className="control">
-                            <div className="tags has-addons">
-                              <span className="tag is-warning">
-                                {result.id}
-                              </span>
-                            </div>
+                      <div className="field is-grouped mt-1">
+                        <div className="control">
+                          <div className="tags has-addons">
+                            <span className="tag is-light">Cover date</span>
+                            <span className="tag is-info is-light">
+                              {dayjs(result.cover_date).format("MMM D, YYYY")}
+                            </span>
                          </div>
                        </div>

-                        <a href={result.api_detail_url}>
-                          {result.api_detail_url}
-                        </a>
-                        <p>
-                          {ellipsize(
-                            convert(result.description, {
-                              baseElements: {
-                                selectors: ["p", "div"],
-                              },
-                            }),
-                            320,
-                          )}
-                        </p>
-                        <div className="mt-2">
-                          <button
-                            className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                            onClick={() => addToLibrary("comicvine", result)}
-                          >
-                            <i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
-                            Mark as Wanted
-                          </button>
+                        <div className="control">
+                          <div className="tags has-addons">
+                            <span className="tag is-warning">{result.id}</span>
+                          </div>
                        </div>
                      </div>
+
+                      <a href={result.api_detail_url}>
+                        {result.api_detail_url}
+                      </a>
+                      <p>
+                        {ellipsize(
+                          convert(result.description, {
+                            baseElements: {
+                              selectors: ["p", "div"],
+                            },
+                          }),
+                          320,
+                        )}
+                      </p>
+                      <div className="mt-2">
+                        <button
+                          className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                          onClick={() => addToLibrary("comicvine", result)}
+                        >
+                          <i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
+                          Mark as Wanted
+                        </button>
+                      </div>
                    </div>
                  </div>
-                ) : (
-                  <div>Loading</div>
-                );
-              })}
-            </div>
-          ) : (
-            <article className="message is-dark is-half">
-              <div className="message-body">
-                <p className="mb-2">
-                  <span className="tag is-medium is-info is-light">
-                    Search the ComicVine database
-                  </span>
+                </div>
+              ) : (
+                <div>Loading</div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="mx-auto mx-auto max-w-screen-md px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
+            <article
+              role="alert"
+              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
+            >
+              <div>
+                <p> Search the ComicVine database</p>
+                <p>
+                  Note that you need an instance of AirDC++ already running to
+                  use this form to connect to it.
+                </p>
+                <p>
                  Search and add issues, series and trade paperbacks to your
                  library. Then, download them using the configured AirDC++ or
                  torrent clients.
                </p>
              </div>
            </article>
-          )}
-        </div>
+          </div>
+        )}
      </section>
-    </>
+    </div>
  );
 };

--- a/src/client/components/Volumes/Volumes.tsx
+++ b/src/client/components/Volumes/Volumes.tsx
@@ -4,124 +4,82 @@ import Card from "../shared/Carda";
 import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
-import { isUndefined } from "lodash";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";

 export const Volumes = (props): ReactElement => {
  // const volumes = useSelector((state: RootState) => state.fileOps.volumes);
-  useEffect(() => {
-    // dispatch(
-    //   searchIssue(
-    //     {
-    //       query: {},
-    //     },
-    //     {
-    //       pagination: {
-    //         size: 25,
-    //         from: 0,
-    //       },
-    //       type: "volumes",
-    //       trigger: "volumesPage",
-    //     },
-    //   ),
-    // );
-  }, []);
+  const {
+    data: volumes,
+    isSuccess,
+    isError,
+    isLoading,
+  } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
+        method: "POST",
+        data: {
+          query: {},
+          pagination: {
+            size: 25,
+            from: 0,
+          },
+          type: "volumes",
+          trigger: "volumesPage",
+        },
+      }),
+    queryKey: ["volumes"],
+  });
+  console.log(volumes);
  const columnData = useMemo(
-    () => [
+    (): any => [
      {
        header: "Volume Details",
        id: "volumeDetails",
        minWidth: 450,
        accessorKey: "_source",
-        cell: (row) => {
+        cell: (row): any => {
          const foo = row.getValue();
          return (
-            <div className="columns">
-              <div className="column">
-                <div className="comic-detail issue-metadata">
-                  <dl>
-                    <dd>
-                      <div className="columns mt-2">
-                        <div className="">
-                          <Card
-                            imageUrl={
-                              foo.sourcedMetadata.comicvine.volumeInformation
-                                .image.thumb_url
-                            }
-                            orientation={"vertical"}
-                            hasDetails={false}
-                            // cardContainerStyle={{ maxWidth: 200 }}
-                          />
-                        </div>
-                        <div className="column">
-                          <dl>
-                            <dt>
-                              <h6 className="name has-text-weight-medium mb-1">
-                                {
-                                  foo.sourcedMetadata.comicvine
-                                    .volumeInformation.name
-                                }
-                              </h6>
-                            </dt>
-                            <dd className="is-size-7">
-                              published by{" "}
-                              <span className="has-text-weight-semibold">
-                                {
-                                  foo.sourcedMetadata.comicvine
-                                    .volumeInformation.publisher.name
-                                }
-                              </span>
-                            </dd>
-
-                            <dd className="is-size-7">
-                              <span>
-                                {ellipsize(
-                                  convert(
-                                    foo.sourcedMetadata.comicvine
-                                      .volumeInformation.description,
-                                    {
-                                      baseElements: {
-                                        selectors: ["p"],
-                                      },
-                                    },
-                                  ),
-                                  120,
-                                )}
-                              </span>
-                            </dd>
-
-                            <dd className="is-size-7 mt-2">
-                              <div className="field is-grouped is-grouped-multiline">
-                                <div className="control">
-                                  <span className="tags">
-                                    <span className="tag is-success is-light has-text-weight-semibold">
-                                      Total Issues
-                                    </span>
-                                    <span className="tag is-success is-light">
-                                      {
-                                        foo.sourcedMetadata.comicvine
-                                          .volumeInformation.count_of_issues
-                                      }
-                                    </span>
-                                  </span>
-                                </div>
-                              </div>
-                            </dd>
-                          </dl>
-                        </div>
-                      </div>
-                    </dd>
-                  </dl>
-                </div>
+            <div className="flex flex-row gap-3 mt-5">
+              <Card
+                imageUrl={
+                  foo.sourcedMetadata.comicvine.volumeInformation.image
+                    .small_url
+                }
+                orientation={"cover-only"}
+                hasDetails={false}
+              />
+              <div className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg h-fit">
+                <span className="text-xl mb-1">
+                  {foo.sourcedMetadata.comicvine.volumeInformation.name}
+                </span>
+                <p>
+                  {ellipsize(
+                    convert(
+                      foo.sourcedMetadata.comicvine.volumeInformation
+                        .description,
+                      {
+                        baseElements: {
+                          selectors: ["p"],
+                        },
+                      },
+                    ),
+                    120,
+                  )}
+                </p>
              </div>
            </div>
          );
        },
      },
      {
-        header: "Download Status",
+        header: "Other Details",
        columns: [
          {
-            header: "Files",
+            header: "Downloads",
            accessorKey: "_source.acquisition.directconnect",
            align: "right",
            cell: (props) => {
@@ -142,12 +100,34 @@ export const Volumes = (props): ReactElement => {
            },
          },
          {
-            header: "Type",
-            id: "Air",
+            header: "Publisher",
+            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
+            cell: (props): any => {
+              const row = props.getValue();
+              return <div className="mt-5 text-md">{row.publisher.name}</div>;
+            },
          },
          {
-            header: "Type",
-            id: "dcc",
+            header: "Issue Count",
+            accessorKey:
+              "_source.sourcedMetadata.comicvine.volumeInformation.count_of_issues",
+            cell: (props): any => {
+              const row = props.getValue();
+              return (
+                <div className="mt-5">
+                  {/* issue count */}
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--documents-minimalistic-bold-duotone] w-6 h-6"></i>
+                    </span>
+
+                    <span className="text-lg text-slate-500 dark:text-slate-900">
+                      {row}
+                    </span>
+                  </span>
+                </div>
+              );
+            },
          },
        ],
      },
@@ -155,17 +135,29 @@ export const Volumes = (props): ReactElement => {
    [],
  );
  return (
-    <section className="container">
-      <div className="section">
-        <div className="header-area">
-          <h1 className="title">Volumes</h1>
-        </div>
-        {!isUndefined(volumes.hits) && (
+    <div>
+      <section className="">
+        <header className="bg-slate-200 dark:bg-slate-500">
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="text-center sm:text-left">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
+                  Volumes
+                </h1>
+
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Browse your collection of volumes.
+                </p>
+              </div>
+            </div>
+          </div>
+        </header>
+        {isSuccess ? (
          <div>
            <div className="library">
              <T2Table
-                sourceData={volumes?.hits}
-                totalPages={volumes.hits.length}
+                sourceData={volumes?.data.hits.hits}
+                totalPages={volumes?.data.hits.hits.length}
                paginationHandlers={{
                  nextPage: () => {},
                  previousPage: () => {},
@@ -174,9 +166,13 @@ export const Volumes = (props): ReactElement => {
              />
            </div>
          </div>
-        )}
-      </div>
-    </section>
+        ) : null}
+        {isError ? (
+          <div>An error was encountered while retrieving volumes</div>
+        ) : null}
+        {isLoading ? <>Loading...</> : null}
+      </section>
+    </div>
  );
 };

--- a/src/client/components/WantedComics/WantedComics.tsx
+++ b/src/client/components/WantedComics/WantedComics.tsx
@@ -1,32 +1,36 @@
 import React, { ReactElement, useCallback, useEffect, useMemo } from "react";
-import { searchIssue } from "../../actions/fileops.actions";
 import SearchBar from "../Library/SearchBar";
 import T2Table from "../shared/T2Table";
-import { isEmpty, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";

 export const WantedComics = (props): ReactElement => {
-  // const wantedComics = useSelector(
-  //   (state: RootState) => state.fileOps.wantedComics,
-  // );
-  useEffect(() => {
-    // dispatch(
-    //   searchIssue(
-    //     {
-    //       query: {},
-    //     },
-    //     {
-    //       pagination: {
-    //         size: 25,
-    //         from: 0,
-    //       },
-    //       type: "wanted",
-    //       trigger: "wantedComicsPage"
-    //     },
-    //   ),
-    // );
-  }, []);
+  const {
+    data: wantedComics,
+    isSuccess,
+    isError,
+    isLoading,
+  } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
+        method: "POST",
+        data: {
+          query: {},

+          pagination: {
+            size: 25,
+            from: 0,
+          },
+          type: "wanted",
+          trigger: "wantedComicsPage",
+        },
+      }),
+    queryKey: ["wantedComics"],
+    enabled: true,
+  });
  const columnData = [
    {
      header: "Comic Information",
@@ -36,7 +40,10 @@ export const WantedComics = (props): ReactElement => {
          id: "comicDetails",
          minWidth: 350,
          accessorFn: (data) => data,
-          cell: (value) => <MetadataPanel data={value.getValue()} />,
+          cell: (value) => {
+            const row = value.getValue()._source;
+            return row && <MetadataPanel data={row} />;
+          },
        },
      ],
    },
@@ -45,8 +52,8 @@ export const WantedComics = (props): ReactElement => {
      columns: [
        {
          header: "Files",
-          accessorKey: "acquisition",
          align: "right",
+          accessorKey: "_source.acquisition",
          cell: (props) => {
            const {
              directconnect: { downloads },
@@ -69,7 +76,7 @@ export const WantedComics = (props): ReactElement => {
        {
          header: "Download Details",
          id: "downloadDetails",
-          accessorKey: "acquisition",
+          accessorKey: "_source.acquisition",
          cell: (data) => (
            <ol>
              {data.getValue().directconnect.downloads.map((download, idx) => {
@@ -98,23 +105,23 @@ export const WantedComics = (props): ReactElement => {
   * @returns void
   *
   **/
-  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: pageSize,
-            from: pageSize * pageIndex + 1,
-          },
-          type: "wanted",
-          trigger: "wantedComicsPage",
-        },
-      ),
-    );
-  }, []);
+  // const nextPage = useCallback((pageIndex: number, pageSize: number) => {
+  //   dispatch(
+  //     searchIssue(
+  //       {
+  //         query: {},
+  //       },
+  //       {
+  //         pagination: {
+  //           size: pageSize,
+  //           from: pageSize * pageIndex + 1,
+  //         },
+  //         type: "wanted",
+  //         trigger: "wantedComicsPage",
+  //       },
+  //     ),
+  //   );
+  // }, []);

  /**
   * Pagination control that fetches the previous x (pageSize) items
@@ -123,55 +130,71 @@ export const WantedComics = (props): ReactElement => {
   * @param {number} pageSize
   * @returns void
   **/
-  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
-    let from = 0;
-    if (pageIndex === 2) {
-      from = (pageIndex - 1) * pageSize + 2 - 17;
-    } else {
-      from = (pageIndex - 1) * pageSize + 2 - 16;
-    }
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: pageSize,
-            from,
-          },
-          type: "wanted",
-          trigger: "wantedComicsPage",
-        },
-      ),
-    );
-  }, []);
+  // const previousPage = useCallback((pageIndex: number, pageSize: number) => {
+  //   let from = 0;
+  //   if (pageIndex === 2) {
+  //     from = (pageIndex - 1) * pageSize + 2 - 17;
+  //   } else {
+  //     from = (pageIndex - 1) * pageSize + 2 - 16;
+  //   }
+  //   dispatch(
+  //     searchIssue(
+  //       {
+  //         query: {},
+  //       },
+  //       {
+  //         pagination: {
+  //           size: pageSize,
+  //           from,
+  //         },
+  //         type: "wanted",
+  //         trigger: "wantedComicsPage",
+  //       },
+  //     ),
+  //   );
+  // }, []);

  return (
-    <section className="container">
-      <div className="section">
-        <div className="header-area">
-          <h1 className="title">Wanted Comics</h1>
-        </div>
-        {!isEmpty(wantedComics) && (
+    <div className="">
+      <section className="">
+        <header className="bg-slate-200 dark:bg-slate-500">
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="text-center sm:text-left">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
+                  Wanted Comics
+                </h1>
+
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Browse through comics you marked as "wanted."
+                </p>
+              </div>
+            </div>
+          </div>
+        </header>
+        {isSuccess ? (
          <div>
            <div className="library">
              <T2Table
-                sourceData={wantedComics}
-                totalPages={wantedComics.length}
+                sourceData={wantedComics?.data.hits.hits}
+                totalPages={wantedComics?.data.hits.hits.length}
                columns={columnData}
                paginationHandlers={{
-                  nextPage: nextPage,
-                  previousPage: previousPage,
+                  nextPage: () => {},
+                  previousPage: () => {},
                }}
                // rowClickHandler={navigateToComicDetail}
              />
              {/* pagination controls */}
            </div>
          </div>
-        )}
-      </div>
-    </section>
+        ) : null}
+        {isLoading ? <div>Loading...</div> : null}
+        {isError ? (
+          <div>An error occurred while retrieving the pull list.</div>
+        ) : null}
+      </section>
+    </div>
  );
 };

--- a/src/client/components/shared/DatePicker.tsx
+++ b/src/client/components/shared/DatePicker.tsx
@@ -0,0 +1,103 @@
+import React, { ChangeEventHandler, useRef, useState } from "react";
+
+import { format, isValid, parse } from "date-fns";
+import FocusTrap from "focus-trap-react";
+import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
+import { usePopper } from "react-popper";
+
+export default function DatePickerDialog() {
+  const [selected, setSelected] = useState<Date>();
+  const [inputValue, setInputValue] = useState<string>("");
+  const [isPopperOpen, setIsPopperOpen] = useState(false);
+
+  const popperRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  const popper = usePopper(popperRef.current, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const closePopper = () => {
+    setIsPopperOpen(false);
+    buttonRef?.current?.focus();
+  };
+
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setInputValue(e.currentTarget.value);
+    const date = parse(e.currentTarget.value, "y-MM-dd", new Date());
+    if (isValid(date)) {
+      setSelected(date);
+    } else {
+      setSelected(undefined);
+    }
+  };
+
+  const handleButtonClick = () => {
+    setIsPopperOpen(true);
+  };
+
+  const handleDaySelect: SelectSingleEventHandler = (date) => {
+    setSelected(date);
+    if (date) {
+      setInputValue(format(date, "y-MM-dd"));
+      closePopper();
+    } else {
+      setInputValue("");
+    }
+  };
+
+  return (
+    <div>
+      <div ref={popperRef}>
+        <input
+          size={12}
+          type="text"
+          placeholder={format(new Date(), "y-MM-dd")}
+          value={inputValue}
+          onChange={handleInputChange}
+        />
+        <button
+          ref={buttonRef}
+          type="button"
+          aria-label="Pick a date"
+          onClick={handleButtonClick}
+        >
+          Pick a date
+        </button>
+      </div>
+      {isPopperOpen && (
+        <FocusTrap
+          active
+          focusTrapOptions={{
+            initialFocus: false,
+            allowOutsideClick: true,
+            clickOutsideDeactivates: true,
+            onDeactivate: closePopper,
+            fallbackFocus: buttonRef.current || undefined,
+          }}
+        >
+          <div
+            tabIndex={-1}
+            style={popper.styles.popper}
+            className="bg-slate-200 p-2 rounded-lg z-50"
+            {...popper.attributes.popper}
+            ref={setPopperElement}
+            role="dialog"
+            aria-label="DayPicker calendar"
+          >
+            <DayPicker
+              initialFocus={isPopperOpen}
+              mode="single"
+              defaultMonth={selected}
+              selected={selected}
+              onSelect={handleDaySelect}
+            />
+          </div>
+        </FocusTrap>
+      )}
+    </div>
+  );
+}
--- a/src/client/components/shared/Header.tsx
+++ b/src/client/components/shared/Header.tsx
@@ -1,20 +1,29 @@
 import React, { ReactElement } from "react";
+import { Link } from "react-router-dom";

 type IHeaderProps = {
  headerContent: string;
  subHeaderContent: string;
  iconClassNames: string;
+  link?: string;
 };

 export const Header = (props: IHeaderProps): ReactElement => {
  return (
    <div className="mt-7">
      <div className="">
-        <a className="" onClick={() => {}}>
-          <span className="text-xl">
-            <i className=""></i> {props.headerContent}
-          </span>
-        </a>
+        {props.link ? (
+          <Link to={props.link}>
+            <span className="text-xl">
+              <span className="underline">
+                {props.headerContent}{" "}
+                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
+              </span>
+            </span>
+          </Link>
+        ) : (
+          <div className="text-xl">{props.headerContent}</div>
+        )}
        <p className="">{props.subHeaderContent}</p>
      </div>
    </div>
--- a/src/client/components/shared/MetadataPanel.tsx
+++ b/src/client/components/shared/MetadataPanel.tsx
@@ -16,6 +16,7 @@ interface IMetadatPanelProps {
  containerStyle: any;
 }
 export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
+  console.log(props);
  const {
    rawFileDetails,
    inferredMetadata,
@@ -114,7 +115,6 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                </span>
              </span>
            </dd>
-
            <dd className="is-size-7">
              <span>
                {ellipsize(
@@ -127,42 +127,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                )}
              </span>
            </dd>
-
            <dd className="is-size-7 mt-2">
-              <div className="field is-grouped is-grouped-multiline">
-                <div className="control">
-                  <span className="tags">
-                    <span
-                      className="tag is-success is-light has-text-weight-semibold"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.volumeInformation.start_year}
-                    </span>
-                    <span
-                      className="tag is-success is-light"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.volumeInformation.count_of_issues}
-                    </span>
-                  </span>
-                </div>
-                <div className="control">
-                  <div className="tags has-addons">
-                    <span
-                      className="tag is-primary is-light"
-                      style={props.tagsStyle}
-                    >
-                      ComicVine ID
-                    </span>
-                    <span
-                      className="tag is-info is-light"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.id}
-                    </span>
-                  </div>
-                </div>
-              </div>
+              <span className="my-3 mx-2">
+                {comicvine.volumeInformation.start_year}
+              </span>
+              {comicvine.volumeInformation.count_of_issues}
+              ComicVine ID
+              {comicvine.id}
            </dd>
          </dl>
        ),
--- a/src/client/components/shared/Navbar2.tsx
+++ b/src/client/components/shared/Navbar2.tsx
@@ -52,12 +52,12 @@ export const Navbar2 = (): ReactElement => {
              </li>

              <li>
-                <a
+                <Link
+                  to="/volumes"
                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                  href="/"
                >
                  Volumes
-                </a>
+                </Link>
              </li>

              <li>
@@ -69,12 +69,12 @@ export const Navbar2 = (): ReactElement => {
                </a>
              </li>
              <li>
-                <a
+                <Link
                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                  href="/search"
+                  to="/search"
                >
                  Comicvine Search
-                </a>
+                </Link>
              </li>
            </ul>
          </nav>
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -14,6 +14,8 @@ import Dashboard from "./components/Dashboard/Dashboard";
 import Search from "./components/Search/Search";
 import TabulatedContentContainer from "./components/Library/TabulatedContentContainer";
 import { ComicDetailContainer } from "./components/ComicDetail/ComicDetailContainer";
+import Volumes from "./components/Volumes/Volumes";
+import WantedComics from "./components/WantedComics/WantedComics";

 const queryClient = new QueryClient();

@@ -23,6 +25,7 @@ const router = createBrowserRouter([
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
+      { path: "/", element: <Dashboard /> },
      { path: "dashboard", element: <Dashboard /> },
      { path: "settings", element: <Settings /> },
      {
@@ -35,6 +38,8 @@ const router = createBrowserRouter([
      },
      { path: "import", element: <Import path={"./comics"} /> },
      { path: "search", element: <Search /> },
+      { path: "volumes", element: <Volumes /> },
+      { path: "wanted", element: <WantedComics /> },
    ],
  },
 ]);
--- a/yarn.lock
+++ b/yarn.lock
@@ -1914,6 +1914,11 @@
  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==

+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@radix-ui/number@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.1.tgz#644161a3557f46ed38a042acf4a770e826021674"
@@ -6012,6 +6017,21 @@ flow-parser@0.*:
  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.227.0.tgz#e50b65be9dc6810438c975e816a68005fbcd5107"
  integrity sha512-nOygtGKcX/siZK/lFzpfdHEfOkfGcTW7rNroR1Zsz6T/JxSahPALXVt5qVHq/fgvMJuv096BTKbgxN3PzVBaDA==

+focus-trap-react@^10.2.3:
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-10.2.3.tgz#a5a2ea7fbb042ffa4337fde72758325ed0fb793a"
+  integrity sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==
+  dependencies:
+    focus-trap "^7.5.4"
+    tabbable "^6.2.0"
+
+focus-trap@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.4.tgz#6c4e342fe1dae6add9c2aa332a6e7a0bbd495ba2"
+  integrity sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==
+  dependencies:
+    tabbable "^6.2.0"
+
 follow-redirects@^1.15.4:
  version "1.15.5"
  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
@@ -8896,7 +8916,7 @@ react-confetti@^6.1.0:
  dependencies:
    tween-functions "^1.2.0"

-react-day-picker@^8.6.0:
+react-day-picker@^8.10.0:
  version "8.10.0"
  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.0.tgz#729c5b9564967a924213978fb9c0751884a60595"
  integrity sha512-mz+qeyrOM7++1NCb1ARXmkjMkzWVh2GL9YiPbRjKe0zHccvekk4HE+0MPOZOrosn8r8zTHIIeOUXTmXRqmkRmg==
@@ -8939,7 +8959,7 @@ react-element-to-jsx-string@^15.0.0:
    is-plain-object "5.0.0"
    react-is "18.1.0"

-react-fast-compare@^3.2.0:
+react-fast-compare@^3.0.1, react-fast-compare@^3.2.0:
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
@@ -9012,6 +9032,14 @@ react-modal@^3.14.3, react-modal@^3.15.1:
    react-lifecycles-compat "^3.0.0"
    warning "^4.0.3"

+react-popper@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-refresh@^0.14.0:
  version "0.14.0"
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
@@ -9950,6 +9978,11 @@ synchronous-promise@^2.0.15:
  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.17.tgz#38901319632f946c982152586f2caf8ddc25c032"
  integrity sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==

+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 taffydb@2.6.2:
  version "2.6.2"
  resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.6.2.tgz#7cbcb64b5a141b6a2efc2c5d2c67b4e150b2a268"
@@ -10595,7 +10628,7 @@ walker@^1.0.8:
  dependencies:
    makeerror "1.0.12"

-warning@^4.0.3:
+warning@^4.0.2, warning@^4.0.3:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==