Merge branch 'main' into checkinresponses-backend/eva

packages/client/src/App.js

@@ -1,9 +1,9 @@
+// /* eslint-disable */
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Dashboard from './containers/Dashboard/Dashboard';
 import { LandingPageContainer } from './containers/LandingPage/LandingPage';
-import { PageNotFound } from './containers/PageNotFound/PageNotFound';
-import { CheckinQuestions } from './containers/Dashboard/CheckinQuestionsPage/CheckinQuestions';
+import { CheckinQuestions } from './containers/QuestionPage/CheckinQuestions';
 import { TeamIdContextProvider } from './hooks/contextHook';
 import { ReportPage } from './containers/ReportPage/ReportPage';
 
@@ -16,7 +16,7 @@ function App() {
             <Route path="/" element={<LandingPageContainer />} />
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/questions" element={<CheckinQuestions />} />
-            <Route path="/reportpage" element={<ReportPage />} />
+             <Route path="/reportpage" element={<ReportPage />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
         </Router>

packages/client/src/components/CheckinQuestionsPage/AddCheckinQuestionModal.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, TextField, Modal, Box, Typography } from '@mui/material';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+};
+
+const AddCheckinQuestionModal = ({
+  showAddModal,
+  setShowAddModal,
+  newQuestionText,
+  setNewQuestionText,
+  handleAdd,
+}) => {
+  const [error, setError] = useState(false);
+
+  const onSave = () => {
+    if (newQuestionText.trim() === '') {
+      setError(true);
+      return;
+    }
+    handleAdd();
+    setNewQuestionText('');
+  };
+
+  return (
+    <Modal
+      open={showAddModal}
+      onClose={() => setShowAddModal(false)}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style} className="modal-container">
+        <Typography
+          variant="h6"
+          style={{ textAlign: 'center', marginBottom: '10px' }}
+        >
+          Add Checkin Question
+        </Typography>
+        <TextField
+          id="outlined-multiline-static"
+          label="Write your question here..."
+          multiline
+          rows={4}
+          value={newQuestionText}
+          onChange={(e) => {
+            setNewQuestionText(e.target.value);
+            setError(false);
+          }}
+          fullWidth
+          variant="outlined"
+          error={error}
+          helperText={error ? 'Question cannot be empty' : ''}
+          sx={{ mb: 2 }}
+        />
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          <Button variant="contained" onClick={onSave}>
+            Add Question
+          </Button>
+          <Button variant="outlined" onClick={() => setShowAddModal(false)}>
+            Cancel
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+AddCheckinQuestionModal.propTypes = {
+  showAddModal: PropTypes.bool.isRequired,
+  setShowAddModal: PropTypes.func.isRequired,
+  newQuestionText: PropTypes.string.isRequired,
+  setNewQuestionText: PropTypes.func.isRequired,
+  handleAdd: PropTypes.func.isRequired,
+};
+
+export { AddCheckinQuestionModal };

packages/client/src/components/CheckinQuestionsPage/EditCheckinQuestionModal.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, TextField, Modal, Box, Typography } from '@mui/material';
+
+const EditCheckinQuestionModal = ({
+  showEditModal,
+  questionId,
+  questionText,
+  setQuestionText,
+  handleSaveEdit,
+  handleClose,
+}) => {
+  if (!showEditModal) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open={showEditModal}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box className="modal-container">
+        <Typography variant="h6" className="modal-title">
+          Edit Checkin Question
+        </Typography>
+        <TextField
+          className="modal-textfield"
+          id="outlined-multiline-static"
+          label="Write your question here..."
+          multiline
+          rows={4}
+          value={questionText}
+          onChange={(e) => setQuestionText(e.target.value)}
+          fullWidth
+          variant="outlined"
+        />
+        <Box className="button-container-edit-question">
+          <Button
+            variant="contained"
+            onClick={() => handleSaveEdit(questionId)}
+          >
+            Save
+          </Button>
+          <Button variant="outlined" onClick={handleClose}>
+            Cancel
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+EditCheckinQuestionModal.propTypes = {
+  showEditModal: PropTypes.bool.isRequired,
+  questionId: PropTypes.number.isRequired,
+  questionText: PropTypes.string.isRequired,
+  setQuestionText: PropTypes.func.isRequired,
+  handleSaveEdit: PropTypes.func.isRequired,
+  handleClose: PropTypes.func.isRequired,
+};
+
+export { EditCheckinQuestionModal };

packages/client/src/components/CheckinQuestionsPage/QuestionList.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography, IconButton } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import '../../containers/QuestionPage/CheckinQuestions.css';
+
+const QuestionList = ({
+  checkinQuestions,
+  editQuestionId,
+  handleEditQuestion,
+  handleDeleteQuestion,
+}) => {
+  return (
+    <ul className="question-list">
+      {checkinQuestions.map((question) => (
+        <li key={question.question_id} className="question-item">
+          <div className="question-content">
+            <Typography>{question.question_text}</Typography>
+            {editQuestionId !== question.question_id && (
+              <div className="question-actions">
+                <IconButton
+                  onClick={() =>
+                    handleEditQuestion(
+                      question.question_id,
+                      question.question_text,
+                    )
+                  }
+                >
+                  <EditIcon />
+                </IconButton>
+                <IconButton
+                  onClick={() => handleDeleteQuestion(question.question_id)}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </div>
+            )}
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+QuestionList.propTypes = {
+  checkinQuestions: PropTypes.arrayOf(PropTypes.object).isRequired,
+  editQuestionId: PropTypes.number,
+  handleEditQuestion: PropTypes.func.isRequired,
+  handleDeleteQuestion: PropTypes.func.isRequired,
+};
+
+export default QuestionList;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Typography, Button, TextField } from '@mui/material';
+import PropTypes from 'prop-types';
+
+const EditingMember = ({
+  editMemberId,
+  editMemberFirstName,
+  editMemberLastName,
+  setEditMemberFirstName,
+  setEditMemberLastName,
+  handleEditSave,
+  setEditMemberId,
+}) => {
+  return (
+    <div className="edit-member-container">
+      <Typography variant="body1" className="edit-member-heading">
+        Edit Member
+      </Typography>
+      <div className="edit-member-details">
+        <div className="input-container">
+          <TextField
+            className="edit-member-input"
+            size="small"
+            id="outlined-basic"
+            label="First Name"
+            variant="outlined"
+            type="text"
+            value={editMemberFirstName}
+            onChange={(e) => setEditMemberFirstName(e.target.value)}
+            placeholder="First Name"
+          />
+          <TextField
+            className="edit-member-input"
+            size="small"
+            id="outlined-basic"
+            label="Last Name"
+            variant="outlined"
+            type="text"
+            value={editMemberLastName}
+            onChange={(e) => setEditMemberLastName(e.target.value)}
+            placeholder="Last Name"
+          />
+        </div>
+        <div className="button-container">
+          <Button variant="contained" onClick={handleEditSave}>
+            Save
+          </Button>
+          <Button variant="outlined" onClick={() => setEditMemberId(null)}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Define prop types for the EditingMember component
+EditingMember.propTypes = {
+  editMemberId: PropTypes.number.isRequired,
+  editMemberFirstName: PropTypes.string.isRequired,
+  editMemberLastName: PropTypes.string.isRequired,
+  setEditMemberFirstName: PropTypes.func.isRequired,
+  setEditMemberLastName: PropTypes.func.isRequired,
+  handleEditSave: PropTypes.func.isRequired,
+  setEditMemberId: PropTypes.func.isRequired,
+};
+
+export default EditingMember;

packages/client/src/components/Dashboard/NavigationBar.css

@@ -0,0 +1,48 @@
+.menu-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 18.204px;
+  flex: 1 0 0;
+  color: var(--fade-color);
+}
+
+.left-nav-bar-container {
+  display: flex;
+  padding: 40px 0px;
+  flex-direction: column;
+  align-items: center;
+  gap: 80px;
+  flex-shrink: 0;
+  border-radius: 0px 40px 40px 0px;
+  background: var(--primary-color);
+}
+
+.logo {
+  height: 4rem;
+  background: none;
+}
+
+.left-nav-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-shrink: 0;
+  flex-grow: 1;
+}
+
+.left-nav-bar-top {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.left-nav-bar-top .menu-icon:nth-child(1) {
+  color: white;
+}
+
+.left-nav-bar-bottom {
+  display: flex;
+  align-items: center;
+}

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

@@ -6,6 +6,7 @@ import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import ExitToAppOutlinedIcon from '@mui/icons-material/ExitToAppOutlined';
 import logo from './logo-dark.svg';
+import './NavigationBar.css';
 
 const NavigationItem = ({ icon, name }) => (
   <div style={{ marginBottom: '20px' }}>

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IconButton } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Dashboard from '../../containers/Dashboard/Dashboard';
+
+const TeamMemberListItem = ({
+  member,
+  handleEditMember,
+  handleDeleteMember,
+}) => {
+  return (
+    <li key={member.member_id}>
+      <div className="member-info-container">
+        <div className="member-info">
+          {member.first_name} {member.last_name}
+        </div>
+        <div>
+          <IconButton onClick={() => handleEditMember(member.member_id)}>
+            <EditIcon />
+          </IconButton>
+          <IconButton onClick={() => handleDeleteMember(member.member_id)}>
+            <DeleteIcon />
+          </IconButton>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+TeamMemberListItem.propTypes = {
+  member: PropTypes.shape({
+    member_id: PropTypes.number.isRequired,
+    first_name: PropTypes.string.isRequired,
+    last_name: PropTypes.string.isRequired,
+  }).isRequired,
+  handleEditMember: PropTypes.func.isRequired,
+  handleDeleteMember: PropTypes.func.isRequired,
+};
+
+export default TeamMemberListItem;