Merge pull request #30 from HackYourFuture-CPH/report-questions-page/…

…rumana

Implementing report page

packages/client/src/components/Dashboard/TeamMemberListItem.jsx

@@ -5,6 +5,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 //import Dashboard from '../../containers/Dashboard/Dashboard';
 
+
 const TeamMemberListItem = ({
   member,
   handleEditMember,

packages/client/src/components/Dashboard/TeamMembers.jsx

@@ -3,7 +3,7 @@ import { apiURL } from '../../apiURL';
 import { AddTeamMemberModal } from '../../containers/LandingPage/AddTeamMemberModal';
 import { Typography, Button } from '@mui/material';
 import TeamMemberListItem from './TeamMemberListItem';
-import EditingMember from './EditingMember'; // Import the newly created component
+import EditingMember from './EditingMember';
 import { useTeamIdContext } from '../../hooks/contextHook';
 
 const TeamMembers = () => {
@@ -27,11 +27,18 @@ const TeamMembers = () => {
     } catch (error) {
       console.error(error);
     }
+  }, [teamId]);
+
+  useEffect(() => {
+    fetchTeamMembers();
+  }, [fetchTeamMembers]);
+
   }, [teamId]); // Include teamId in the dependency array for useCallback
 
   useEffect(() => {
     fetchTeamMembers();
   }, [fetchTeamMembers]); // Include fetchTeamMembers in the dependency array for useEffect
+>
 
   const handleEditMember = (id) => {
     setEditMemberId(id);

packages/client/src/components/ReportPage/ReportTextField.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types'; // Import PropTypes
+import './Textfield.css';
+
+const ReportTextField = ({ value, onChange }) => {
+  return (
+    <textarea
+      className="text-field"
+      placeholder="Your response"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      rows="2"
+    />
+  );
+};
+
+// Add prop type validation
+ReportTextField.propTypes = {
+  value: PropTypes.string.isRequired, // Validate value prop as string and required
+  onChange: PropTypes.func.isRequired, // Validate onChange prop as function and required
+};
+
+export default ReportTextField;

packages/client/src/components/ReportPage/Textfield.css

@@ -0,0 +1,11 @@
+.text-field {
+  width: 100%;
+  margin-bottom: 10px;
+  display: flex;
+  padding: 12px 24px;
+  align-items: center;
+  gap: 32px;
+  border-radius: 4px;
+  border-bottom: 0.2px solid var(--Neutral-500, #64748b);
+  background: var(--Shades-White, #fff);
+}

packages/client/src/containers/Dashboard/Dashboard.css

@@ -35,7 +35,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: 80px;
+  gap: 40px;
   flex-shrink: 0;
   flex-grow: 1;
   height: 100vh;

packages/client/src/containers/ReportPage/ReportPage.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import NavigationBar from '../../components/Dashboard/NavigationBar';
+import placeholder from '../Dashboard/placeholder.png';
+import '../Dashboard/Dashboard.css';
+import { ReportPageQuestions } from './ReportPageQuestions';
+
+const ReportPage = () => {
+  return (
+    <div className="dashboard-container">
+      <NavigationBar />
+      <div className="content-container">
+        <div className="top-nav-bar">
+          <div className="heading-text">
+            <Typography variant="h4">Dashboard</Typography>
+            <Typography className="sub-heading" variant="body1">
+              Welcome back, Meraj
+            </Typography>
+          </div>
+
+          <div className="image-container">
+            <img
+              className="placeholder-image"
+              src={placeholder}
+              alt="Placeholder"
+            />
+            <div className="name-mail-container">
+              <Typography variant="h6">Meraj</Typography>
+              <Typography className="subtext" variant="body2">
+                meraj@gmail.com
+              </Typography>
+            </div>
+          </div>
+        </div>
+        <ReportPageQuestions />
+      </div>
+    </div>
+  );
+};
+
+export default ReportPage;

packages/client/src/containers/ReportPage/ReportPageQuestions.css

@@ -0,0 +1,43 @@
+.report-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 48px;
+  align-self: stretch;
+  padding: 0 48px;
+}
+.report-questions-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 24px;
+  align-self: stretch;
+}
+
+.questions-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+
+.question-text {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  align-self: stretch;
+}
+
+.text-field {
+  display: flex;
+  padding: 24px 48px;
+  align-items: center;
+  gap: 32px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 0.2px solid #1d4ed8;
+  background: #fff;
+}

packages/client/src/containers/ReportPage/ReportPage.jsx → packages/client/src/containers/ReportPage/ReportPageQuestions.js

@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { apiURL } from '../../apiURL';
-import { useTeamIdContext } from '../../hooks/contextHook';
+import { apiURL } from '../../apiURL.js';
+import { useTeamIdContext } from '../../hooks/contextHook.js';
+import { Button, Typography } from '@mui/material';
+import './ReportPageQuestions.css';
+import CustomTextField from '../../components/ReportPage/ReportTextField.jsx'; // Import the custom text field component
 
-const ReportPage = () => {
+const ReportPageQuestions = () => {
   const [questions, setQuestions] = useState([]);
   const [responses, setResponses] = useState({});
   const [loading, setLoading] = useState(true);
@@ -80,27 +83,38 @@ const ReportPage = () => {
   );
 
   return (
-    <div>
-      <h2>Check-in Questions</h2>
-      {questions.map((question) => (
-        <div key={question.question_id}>
-          <p>{question.question_text}</p>
-          <textarea
-            placeholder="Your response"
-            value={responses[question.question_id]}
-            onChange={(e) =>
-              handleResponseChange(question.question_id, e.target.value)
-            }
-            rows="2"
-            style={{ width: '100%', marginBottom: '10px' }}
-          />
-        </div>
-      ))}
-      <button onClick={handleSubmit} disabled={loading || isSubmitDisabled}>
-        {loading ? 'Submitting...' : 'Submit'}
-      </button>
+    <div className="report-container">
+      <Typography variant="h5" style={{ fontWeight: 'bold' }}>
+        Check-in Questions
+      </Typography>
+      <div className="report-questions-container">
+        {questions.map((question, index) => (
+          <div className="questions-container" key={question.question_id}>
+            <Typography className="question-text" variant="body1">{`${
+              index + 1
+            }. ${question.question_text}`}</Typography>
+            <CustomTextField
+              className="text-field"
+              value={responses[question.question_id]}
+              onChange={(value) =>
+                handleResponseChange(question.question_id, value)
+              }
+            />
+          </div>
+        ))}
+      </div>
+
+      <Button
+        type="button"
+        variant="contained"
+        size="big"
+        onClick={handleSubmit}
+        disabled={loading || isSubmitDisabled}
+      >
+        {loading ? 'Submitting...' : 'Finish'}
+      </Button>
     </div>
   );
 };
 
-export { ReportPage };
+export { ReportPageQuestions };