🔧 Debugging

src/client/components/ComicDetail.tsx

@@ -15,6 +15,11 @@ import { RawFileDetails } from "./ComicDetail/RawFileDetails";
 import TabControls from "./ComicDetail/TabControls";
 import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel";
 import { Menu } from "./ComicDetail/ActionMenu/Menu";
+import { ArchiveOperations } from "./ComicDetail/Tabs/ArchiveOperations";
+import { ComicInfoXML } from "./ComicDetail/Tabs/ComicInfoXML";
+import AcquisitionPanel from "./ComicDetail/AcquisitionPanel";
+import DownloadsPanel from "./ComicDetail/DownloadsPanel";
+import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation";
 
 import { isEmpty, isUndefined, isNil } from "lodash";
 import { RootState } from "threetwo-ui-typings";
@@ -174,6 +179,79 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     });
   }
 
+  // Tab content and header details
+  const tabGroup = [
+    {
+      id: 1,
+      name: "Volume Information",
+      icon: <i className="fa-solid fa-layer-group"></i>,
+      content: isComicBookMetadataAvailable ? (
+        <VolumeInformation data={comicBookDetailData} key={1} />
+      ) : null,
+      shouldShow: isComicBookMetadataAvailable,
+    },
+    {
+      id: 2,
+      name: "ComicInfo.xml",
+      icon: <i className="fa-solid fa-code"></i>,
+      content: (
+        <div className="columns" key={2}>
+          <div className="column is-three-quarters">
+            {!isNil(comicBookDetailData.sourcedMetadata) &&
+              !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && (
+                <ComicInfoXML
+                  json={comicBookDetailData.sourcedMetadata.comicInfo}
+                />
+              )}
+          </div>
+        </div>
+      ),
+      shouldShow:
+        !isUndefined(comicBookDetailData.sourcedMetadata) &&
+        !isEmpty(comicBookDetailData.sourcedMetadata.comicInfo),
+    },
+    {
+      id: 3,
+      icon: <i className="fa-regular fa-file-archive"></i>,
+      name: "Archive Operations",
+      content: <ArchiveOperations data={comicBookDetailData} key={3} />,
+      shouldShow: areRawFileDetailsAvailable,
+    },
+    {
+      id: 4,
+      icon: <i className="fa-solid fa-floppy-disk"></i>,
+      name: "Acquisition",
+      content: (
+        <AcquisitionPanel
+          query={airDCPPQuery}
+          comicObjectid={comicBookDetailData._id}
+          key={4}
+        />
+      ),
+      shouldShow: true,
+    },
+    {
+      id: 5,
+      icon: null,
+      name:
+        !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? (
+          <span className="download-tab-name">Downloads</span>
+        ) : (
+          "Downloads"
+        ),
+      content: !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && (
+        <DownloadsPanel
+          data={comicBookDetailData.acquisition.directconnect}
+          comicObjectId={comicObjectId}
+          key={5}
+        />
+      ),
+      shouldShow: true,
+    },
+  ];
+  // filtered Tabs
+  const filteredTabs = tabGroup.filter((tab) => tab.shouldShow);
+
   // Determine which cover image to use:
   // 1. from the locally imported or
   // 2. from the CV-scraped version
@@ -255,7 +333,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               </div>
             </div>
 
-            {<TabControls comicObjectId={comicObjectId} />}
+            {<TabControls filteredTabs={filteredTabs} />}
 
             <SlidingPane
               isOpen={visible}