feature: consume /explore/file_name to view details of an uploaded document

frontend/app/explore/DocumentItem/DocumentData.tsx

@@ -0,0 +1,39 @@
+import axios from "axios";
+import { Document } from "../types";
+
+interface DocumentDataProps {
+  documentName: string;
+}
+
+const DocumentData = async ({ documentName }: DocumentDataProps) => {
+  const res = await axios.get(
+    `${process.env.NEXT_PUBLIC_BACKEND_URL}/explore/${documentName}`
+  );
+  const documents = res.data.documents as any[];
+  const doc = documents[0];
+  return (
+    <div className="prose">
+      <p>No. of documents: {documents.length}</p>
+      {/* {documents.map((doc) => (
+        <pre key={doc.name}>{JSON.stringify(doc)}</pre>
+      ))} */}
+      <div className="flex flex-col gap-2">
+        {documents[0] &&
+          Object.keys(documents[0]).map((k) => {
+            return (
+              <div className="grid grid-cols-2 border-b py-2" key={k}>
+                <span className="capitalize font-bold">
+                  {k.replaceAll("_", " ")}
+                </span>
+                <span className="capitalize">
+                  {documents[0][k] || "Not Available"}
+                </span>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default DocumentData;

frontend/app/explore/DocumentItem/index.tsx

@@ -1,10 +1,11 @@
 "use client";
-import { Document } from "./types";
-import Button from "../components/ui/Button";
-import Modal from "../components/ui/Modal";
-import { AnimatedCard } from "../components/ui/Card";
-import { useState } from "react";
+import { Document } from "../types";
+import Button from "../../components/ui/Button";
+import Modal from "../../components/ui/Modal";
+import { AnimatedCard } from "../../components/ui/Card";
+import { Suspense, useState } from "react";
 import axios from "axios";
+import DocumentData from "./DocumentData";
 
 interface DocumentProps {
   document: Document;
@@ -39,9 +40,13 @@ const DocumentItem = ({ document }: DocumentProps) => {
           desc={""}
           Trigger={<Button className="">View</Button>}
         >
-          <div className="bg-white py-10 w-full h-1/2 overflow-auto rounded-lg prose">
+          {/* <div className="bg-white py-10 w-full h-1/2 overflow-auto rounded-lg prose">
             <pre>{JSON.stringify(document, null, 2)}</pre>
-          </div>
+          </div> */}
+          <Suspense fallback="Loading...">
+            {/* @ts-expect-error */}
+            <DocumentData documentName={document.name} />
+          </Suspense>
         </Modal>
         <Modal
           title={"Confirm"}