IDinsight
diff --git a/‎.secrets.baseline
Lines changed: 0 additions & 9 deletions b/‎.secrets.baseline
Lines changed: 0 additions & 9 deletions
diff --git a/‎admin_app/src/app/content/components/ContentCard.tsx
Lines changed: 73 additions & 30 deletions b/‎admin_app/src/app/content/components/ContentCard.tsx
Lines changed: 73 additions & 30 deletions
diff --git a/‎admin_app/src/app/content/components/ContentModal.tsx
Lines changed: 51 additions & 12 deletions b/‎admin_app/src/app/content/components/ContentModal.tsx
Lines changed: 51 additions & 12 deletions
diff --git a/‎admin_app/src/app/content/components/DownloadModal.tsx
Lines changed: 2 additions & 7 deletions b/‎admin_app/src/app/content/components/DownloadModal.tsx
Lines changed: 2 additions & 7 deletions
@@ -145,15 +145,6 @@
         "line_number": 62
       }
     ],
-    ".github/workflows/deploy_gcp_core_backend.yaml": [
-      {
-        "type": "Secret Keyword",
-        "filename": ".github/workflows/deploy_gcp_core_backend.yaml",
-        "hashed_secret": "14a9a30abdb4f24769083489080470ca78f002f6",
-        "is_verified": false,
-        "line_number": 64
-      }
-    ],
     ".github/workflows/deploy_gcp_litellm_proxy.yaml": [
       {
         "type": "Secret Keyword",
 
@@ -13,28 +13,12 @@ import {
 import Link from "next/link";
 import React from "react";
 import { Layout } from "../../../components/Layout";
-import { Tag } from "@/app/content/page";
+import { Content, ContentDisplay, Tag } from "../types";
 
 const CARD_HEIGHT = 210;
 const CARD_MIN_WIDTH = 280;
 
-const ContentCard = ({
-  title,
-  text,
-  content_id,
-  display_number,
-  last_modified,
-  tags,
-  positive_votes,
-  negative_votes,
-  onSuccessfulArchive,
-  onFailedArchive,
-  archiveContent,
-  editAccess,
-  isSelectMode,
-  selectedContents,
-  setSelectedContents,
-}: {
+interface ContentCardProps {
   title: string;
   text: string;
   content_id: number;
@@ -43,20 +27,53 @@ const ContentCard = ({
   tags: Tag[];
   positive_votes: number;
   negative_votes: number;
+  related_contents: Content[];
   onSuccessfulArchive: (content_id: number) => void;
   onFailedArchive: (content_id: number, error_message: string) => void;
   archiveContent: (content_id: number) => Promise<any>;
   editAccess: boolean;
   isSelectMode: boolean;
   selectedContents: number[];
   setSelectedContents: (selectedContents: number[]) => void;
+  getRelatedContent: (content_id: number[]) => Content[];
+}
+const ContentCard: React.FC<ContentCardProps> = ({
+  title,
+  text,
+  content_id,
+  display_number,
+  last_modified,
+  tags,
+  positive_votes,
+  negative_votes,
+  related_contents,
+  onSuccessfulArchive,
+  onFailedArchive,
+  archiveContent,
+  editAccess,
+  isSelectMode,
+  selectedContents,
+  setSelectedContents,
+  getRelatedContent,
 }) => {
   const [openReadModal, setOpenReadModal] = React.useState<boolean>(false);
   const [openArchiveModal, setOpenArchiveModal] = React.useState<boolean>(false);
   const [isHovered, setIsHovered] = React.useState<boolean>(false);
   const [checked, setChecked] = React.useState<boolean>(
     selectedContents.includes(content_id),
   );
+  const [currentContent, setCurrentContent] = React.useState<ContentDisplay>({
+    title,
+    text,
+    content_id,
+    display_number,
+    last_modified,
+    tags,
+    positive_votes,
+    negative_votes,
+    related_contents,
+  });
+
   const truncateTagName = (tagName: string): string => {
     return tagName.length > 15 ? `${tagName.slice(0, 15)}...` : tagName;
   };
@@ -65,10 +82,37 @@ const ContentCard = ({
     setChecked(selectedContents.includes(content_id));
   }, [selectedContents]);
 
+  const handleRelatedContentClick = (content: Content) => {
+    setCurrentContent({
+      title: content.content_title,
+      text: content.content_text,
+      content_id: content.content_id!,
+      display_number: content.display_number,
+      last_modified: content.updated_datetime_utc,
+      tags: tags.filter((tag) => content.content_tags.includes(tag.tag_id)),
+      positive_votes: content.positive_votes,
+      negative_votes: content.negative_votes,
+      related_contents: getRelatedContent(content.related_contents_id),
+    } as ContentDisplay);
+  };
+
   return (
     <>
       <Card
-        onClick={() => setOpenReadModal(true)}
+        onClick={() => {
+          setCurrentContent({
+            title,
+            text,
+            content_id,
+            display_number,
+            last_modified,
+            tags,
+            positive_votes,
+            negative_votes,
+            related_contents,
+          });
+          setOpenReadModal(true);
+        }}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         sx={[
@@ -192,20 +236,19 @@ const ContentCard = ({
         </Layout.FlexBox>
       </Card>
       <ContentViewModal
-        title={title}
-        text={text}
-        content_id={content_id}
-        display_number={display_number}
-        last_modified={last_modified}
-        tags={tags}
+        title={currentContent.title}
+        text={currentContent.text}
+        content_id={currentContent.content_id}
+        display_number={currentContent.display_number}
+        last_modified={currentContent.last_modified}
+        related_contents={currentContent.related_contents}
+        tags={currentContent.tags}
         open={openReadModal}
-        positive_votes={positive_votes}
-        negative_votes={negative_votes}
+        positive_votes={currentContent.positive_votes}
+        negative_votes={currentContent.negative_votes}
         onClose={() => setOpenReadModal(false)}
         editAccess={editAccess}
-        setRefreshKey={function (value: React.SetStateAction<number>): void {
-          throw new Error("Function not implemented.");
-        }}
+        onRelatedContentClick={handleRelatedContentClick}
       />
       <ArchiveContentModal
         content_id={content_id}
 
@@ -9,8 +9,8 @@ import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import Link from "next/link";
 import { Layout } from "@/components/Layout";
-import { Tag } from "@/app/content/page";
 import { CustomError } from "@/utils/api";
+import { Content, Tag } from "../types";
 import { useValidateContentCard, useArchiveContentCard } from "../api";
 
 const ContentViewModal = ({
@@ -22,10 +22,13 @@ const ContentViewModal = ({
   negative_votes,
   last_modified,
   tags,
+  related_contents,
   open,
   onClose,
   setRefreshKey,
+  onRelatedContentClick,
   editAccess,
+
   validation_mode = false,
 }: {
   title: string;
@@ -34,12 +37,14 @@ const ContentViewModal = ({
   display_number: number;
   last_modified: string;
   tags?: Tag[];
+  related_contents: Content[];
   positive_votes: number;
   negative_votes: number;
   open: boolean;
   onClose: () => void;
   setRefreshKey?: React.Dispatch<React.SetStateAction<number>>;
   editAccess: boolean;
+  onRelatedContentClick: (content: Content) => void;
   validation_mode?: boolean;
 }) => {
   const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;
@@ -96,10 +101,11 @@ const ContentViewModal = ({
               </Layout.FlexBox>
             </Layout.FlexBox>
           )}
+
           <Layout.FlexBox
             flexDirection={"column"}
             sx={{
-              maxHeight: "60vh", // this controls overall modal height too
+              maxHeight: "60vh",
               padding: sizes.baseGap,
               marginTop: 1,
               overflowY: "auto",
@@ -121,6 +127,38 @@ const ContentViewModal = ({
               <ReactMarkdown>{text}</ReactMarkdown>
             </Typography>
           </Layout.FlexBox>
+          {related_contents && related_contents.length > 0 && (
+            <Layout.FlexBox
+              flexDirection={"column"}
+              sx={{
+                my: sizes.smallGap,
+              }}
+            >
+              <Typography variant="subtitle1" gutterBottom>
+                Related Contents
+              </Typography>
+              <Layout.FlexBox
+                sx={{
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  py: sizes.smallGap,
+                  alignItems: "center",
+                  gap: sizes.smallGap,
+                }}
+              >
+                {related_contents.map((content) => (
+                  <Chip
+                    key={content.content_id}
+                    variant="outlined"
+                    onClick={() => {
+                      onRelatedContentClick(content);
+                    }}
+                    label={content.content_title}
+                  />
+                ))}
+              </Layout.FlexBox>
+            </Layout.FlexBox>
+          )}
           <Layout.FlexBox
             sx={{
               flexDirection: "row",
@@ -212,20 +250,22 @@ const ContentViewModal = ({
   );
 };
 
-const ArchiveContentModal = ({
-  content_id,
-  open,
-  onClose,
-  onSuccessfulArchive,
-  onFailedArchive,
-  archiveContent,
-}: {
+interface ArchiveContentModalProps {
   content_id: number;
   open: boolean;
   onClose: () => void;
   onSuccessfulArchive: (content_id: number) => void;
   onFailedArchive: (content_id: number, error_message: string) => void;
   archiveContent: (content_id: number) => Promise<any>;
+}
+
+const ArchiveContentModal: React.FC<ArchiveContentModalProps> = ({
+  content_id,
+  open,
+  onClose,
+  onSuccessfulArchive,
+  onFailedArchive,
+  archiveContent,
 }) => {
   return (
     <Dialog
@@ -247,13 +287,12 @@ const ArchiveContentModal = ({
         <Button
           onClick={() => {
             const handleArchiveContent = async (content_id: number) => {
-              const results = archiveContent(content_id)
+              archiveContent(content_id)
                 .then((res) => {
                   onSuccessfulArchive(content_id);
                 })
                 .catch((err) => {
                   const customError = err as CustomError;
-                  console.log("error", customError.message);
                   onFailedArchive(content_id, customError.message);
                 });
             };
 
@@ -11,10 +11,10 @@ import { useAuth } from "@/utils/auth";
 import Papa from "papaparse";
 import { useState } from "react";
 import { LoadingButton } from "@mui/lab";
-import { Content } from "../edit/page";
+import { Content, Tag } from "../types";
 import { Layout } from "@/components/Layout";
 import { getContentList, getTagList } from "../api";
-import { CustomError, handleApiError } from "@/utils/api";
+import { handleApiError } from "@/utils/api";
 
 interface ContentDownload {
   content_id: number | null;
@@ -28,11 +28,6 @@ interface ContentDownload {
   updated_datetime_utc: string;
 }
 
-interface Tag {
-  tag_id: string;
-  tag_name: string;
-}
-
 const DownloadModal = ({
   open,
   onClose,