report styling

gustabcc · gustabcc · commit 9862c23b4e5a · 2024-10-25T21:50:17.000-03:00
diff --git a/src/components/CollapsibleText.tsx b/src/components/CollapsibleText.tsx
@@ -26,24 +26,32 @@ const getStatusIcon = (status?: string) => {
       return null;
   }
 };
-const CollapsibleText: React.FC<CollapsibleTextProps> = ({ title, log, status, children }) => {
+const CollapsibleText: React.FC<CollapsibleTextProps> = ({
+  title,
+  log,
+  status,
+  children,
+}) => {
   const [isOpen, setIsOpen] = useState(import.meta.env.DEV ? true : false);
 
   return (
     <div
       style={{
-        backgroundColor: "#f6f8fa",
+        color: "#fff",
+        backgroundColor: "#0f0a19",
         padding: 16,
-        margin: 12,
+        margin: 16,
         borderRadius: 6,
         border: "1px solid #d1d5da",
-      }}>
+      }}
+    >
       <div
         style={{
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
-        }}>
+        }}
+      >
         <div style={{ display: "flex", alignItems: "center" }}>
           {getStatusIcon(status)}
           <span style={{ marginLeft: 8, fontWeight: 600 }}>{title}</span>
@@ -58,8 +66,10 @@ const CollapsibleText: React.FC<CollapsibleTextProps> = ({ title, log, status, c
             display: "flex",
             alignItems: "center",
             fontSize: 14,
-          }}>
-          {isOpen ? "Hide logs" : "Show logs"} {isOpen ? <FaChevronUp /> : <FaChevronDown />}
+          }}
+        >
+          {isOpen ? "Hide logs" : "Show logs"}{" "}
+          {isOpen ? <FaChevronUp /> : <FaChevronDown />}
         </button>
       </div>
 
@@ -69,7 +79,8 @@ const CollapsibleText: React.FC<CollapsibleTextProps> = ({ title, log, status, c
             padding: "12px 0",
             borderTop: "1px solid #e1e4e8",
             marginTop: 12,
-          }}>
+          }}
+        >
           {children}
           {log && (
             <pre
@@ -78,7 +89,8 @@ const CollapsibleText: React.FC<CollapsibleTextProps> = ({ title, log, status, c
                 background: "#f6f8fa",
                 padding: 12,
                 borderRadius: 6,
-              }}>
+              }}
+            >
               {log}
             </pre>
           )}
diff --git a/src/interviewReport/InterviewReportComponent.tsx b/src/interviewReport/InterviewReportComponent.tsx
@@ -9,6 +9,7 @@ import getTopics from "../services/reportGetTopics";
 import getSummary from "../services/reportGetSummary";
 import CollapsibleText from "../components/CollapsibleText";
 import ReportActionItemComponent from "../components/ReportActionItemComponent";
+import styles from "../styles/reportHeader.module.css";
 import { firestore } from "../main";
 import { collection, getDocs } from "firebase/firestore";
 
@@ -17,8 +18,12 @@ const InterviewReportComponent = () => {
   const [roomId, setRoomId] = useState<string | null>(null);
 
   // Data of the interviews
-  const [interviewsDataList, setInterviewsDataList] = useState<any | null>(null);
-  const [selectedInterviewData, setSelectedInterviewData] = useState<any | null>(null);
+  const [interviewsDataList, setInterviewsDataList] = useState<any | null>(
+    null
+  );
+  const [selectedInterviewData, setSelectedInterviewData] = useState<
+    any | null
+  >(null);
 
   const [videoURL, setVideoURL] = useState<string | null>(null);
   const [codes, setCodes] = useState<any | null>(null);
@@ -27,7 +32,9 @@ const InterviewReportComponent = () => {
   );
   const [actionItens, setActionItens] = useState([{ text: "Loading..." }]);
   const [followUps, setFollowUps] = useState([{ text: "Loading..." }]);
-  const [questionsReport, setQuestionsReport] = useState([{ text: "Loading..." }]);
+  const [questionsReport, setQuestionsReport] = useState([
+    { text: "Loading..." },
+  ]);
   const [topics, setTopics] = useState([{ text: "Loading..." }]);
   const [summary, setSummary] = useState([{ text: "Loading..." }]);
 
@@ -58,7 +65,9 @@ const InterviewReportComponent = () => {
       console.log("Requesting interviews data list...");
       try {
         const request = await getRecordings();
-        const filteredData = request.data.filter((recording: any) => recording.roomId == room_id);
+        const filteredData = request.data.filter(
+          (recording: any) => recording.roomId == room_id
+        );
         setInterviewsDataList(filteredData);
         setVideoStatus("sucess");
       } catch (error) {
@@ -71,7 +80,10 @@ const InterviewReportComponent = () => {
     async function getCodes(room_id: string) {
       console.log("Requesting codes...");
       try {
-        const collectionReference = collection(firestore, `codes/${room_id}/versions`);
+        const collectionReference = collection(
+          firestore,
+          `codes/${room_id}/versions`
+        );
         const querySnapshot = await getDocs(collectionReference);
         const codesData = querySnapshot.docs.map((doc) => doc.data());
         setCodes(codesData);
@@ -137,14 +149,21 @@ const InterviewReportComponent = () => {
 
           // but shows only the selected interview transcript
           if (interview.uuid == recordId) {
-            setMeetingTranscript(transformTranscriptIntoHumanFormat(transcript));
+            setMeetingTranscript(
+              transformTranscriptIntoHumanFormat(transcript)
+            );
             setTranscriptStatus("success");
             //TODO: missing the function
           }
         })
         .catch((error) => {
           setTranscriptStatus("failed");
-          console.error("Error getting transcript for interview ", interview.uuid, ": ", error);
+          console.error(
+            "Error getting transcript for interview ",
+            interview.uuid,
+            ": ",
+            error
+          );
           console.log("Requesting transcript for interview ", interview.uuid);
           requestGenerateTranscript(interview.uuid)
             .then(() =>
@@ -179,7 +198,12 @@ const InterviewReportComponent = () => {
       })
       .catch((error) => {
         setActionItemsStatus("failed");
-        console.error("Error getting action itens for interview ", recordId, ": ", error);
+        console.error(
+          "Error getting action itens for interview ",
+          recordId,
+          ": ",
+          error
+        );
       });
 
     // Get the follow-ups
@@ -191,7 +215,12 @@ const InterviewReportComponent = () => {
       })
       .catch((error) => {
         setFollowUpsStatus("failed");
-        console.error("Error getting follow-ups for interview ", recordId, ": ", error);
+        console.error(
+          "Error getting follow-ups for interview ",
+          recordId,
+          ": ",
+          error
+        );
       });
 
     // Get the questions
@@ -203,7 +232,12 @@ const InterviewReportComponent = () => {
       })
       .catch((error) => {
         setQuestionsStatus("failed");
-        console.error("Error getting questions for interview ", recordId, ": ", error);
+        console.error(
+          "Error getting questions for interview ",
+          recordId,
+          ": ",
+          error
+        );
       });
 
     // Get the topics
@@ -215,7 +249,12 @@ const InterviewReportComponent = () => {
       })
       .catch((error) => {
         setTopicsStatus("failed");
-        console.error("Error getting topics for interview ", recordId, ": ", error);
+        console.error(
+          "Error getting topics for interview ",
+          recordId,
+          ": ",
+          error
+        );
       });
 
     // Get the summary
@@ -227,37 +266,49 @@ const InterviewReportComponent = () => {
       })
       .catch((error) => {
         setSummaryStatus("failed");
-        console.error("Error getting summary for interview ", recordId, ": ", error);
+        console.error(
+          "Error getting summary for interview ",
+          recordId,
+          ": ",
+          error
+        );
       });
   }, [recordId]);
 
   return (
-    <>
-      <div>
-        <h3>Room ID - </h3>
-        <input
-          type="text"
-          value={roomId || ""}
-          onChange={(e) => setRoomId(e.target.value)}
-          placeholder="Enter Room ID"
-        />
+    <div className={styles.container}>
+      <div className={styles.reportHeader}>
+        <div className={styles.reportHeaderContent}>
+          <h3>Room ID - </h3>
+          <input
+            type="text"
+            value={roomId || ""}
+            onChange={(e) => setRoomId(e.target.value)}
+            placeholder="Enter Room ID"
+          />
+        </div>
         {interviewsDataList && (
           <>
-            - Record Id:
+            Record Id:
             <select
+              className={styles.select}
               onChange={(e) => {
                 console.log("selectedInterviewData", e.target.value);
                 setSelectedInterviewData(
-                  interviewsDataList.find((interview: any) => interview.uuid === e.target.value)
+                  interviewsDataList.find(
+                    (interview: any) => interview.uuid === e.target.value
+                  )
                 );
               }}
-              value={recordId || ""}>
+              value={recordId || ""}
+            >
               <option value="" disabled>
                 Select an interview
               </option>
               {interviewsDataList.map((interview: any) => (
                 <option key={interview.uuid} value={interview.uuid}>
-                  {new Date(interview.createdAt).toUTCString()} - {interview.uuid}
+                  {new Date(interview.createdAt).toUTCString()} -{" "}
+                  {interview.uuid}
                 </option>
               ))}
             </select>
@@ -285,7 +336,12 @@ const InterviewReportComponent = () => {
               key={key}
               value={codes[key].code}
               readOnly={true}
-              style={{ width: 1000, height: 200 }}
+              style={{
+                width: "100%",
+                borderRadius: "8px",
+                padding: "12px",
+                height: 200,
+              }}
             />
           ))
         ) : (
@@ -295,13 +351,20 @@ const InterviewReportComponent = () => {
 
       {/* Meeting Transcript */}
       <CollapsibleText title="Meeting transcript" status={transcriptStatus}>
-        <textarea value={meetingTranscript} readOnly={true} style={{ width: 1000, height: 200 }} />
+        <textarea
+          value={meetingTranscript}
+          readOnly={true}
+          style={{ width: "100%", height: 200, color: "#fff" }}
+        />
       </CollapsibleText>
 
       {/* Action itens */}
       <CollapsibleText title="Action itens" status={actionItemsStatus}>
         {actionItens.map((actionItem: any) => (
-          <ReportActionItemComponent key={actionItem.text} text={actionItem.text} />
+          <ReportActionItemComponent
+            key={actionItem.text}
+            text={actionItem.text}
+          />
         ))}
       </CollapsibleText>
       <CollapsibleText title="Follow-ups" status={followUpsStatus}>
@@ -324,7 +387,7 @@ const InterviewReportComponent = () => {
           <p key={summaryItem.text}>{summaryItem.text}</p>
         ))}
       </CollapsibleText>
-    </>
+    </div>
   );
 };
 
diff --git a/src/interviewReport/interviewReport.tsx b/src/interviewReport/interviewReport.tsx
@@ -2,7 +2,11 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import InterviewReportComponent from "./InterviewReportComponent";
 
+const body = document.querySelector("body");
 const rootElement = document.getElementById("root");
+if (rootElement && body) {
+  body.style.backgroundColor = "#0f0a19";
+}
 
 if (rootElement) {
   const root = createRoot(rootElement);
diff --git a/src/styles/reportHeader.module.css b/src/styles/reportHeader.module.css
@@ -0,0 +1,39 @@
+.container {
+  overflow: scroll;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.reportHeader {
+  display: flex;
+  max-width: 100%;
+  justify-content: flex-start;
+  align-items: flex-end;
+  margin: 1rem 1rem;
+  padding: 1rem;
+  border: 1px solid #fff;
+  border-radius: 8px;
+  background-color: #0f0a19;
+  align-items: center;
+  margin-right: rem;
+}
+
+.reportHeaderContent {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.reportHeader input {
+  background-color: #fff;
+  color: #0f0a19;
+  border-radius: 8px;
+  margin: 0 0.5rem 0 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.select {
+  background-color: #fff;
+  color: #0f0a19;
+  border-radius: 8px;
+  margin-left: 0.5rem;
+}
