Shravya: Phase 4 - Tagged Logs for Young Learner Support - Frontend

src/components/ActivityLog/CommentSection.jsx

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { MessageSquare } from 'lucide-react';
+import styles from './styles/CommentSection.module.css';
+import { IconByRole, Tag } from './icons';
+import { useSelector } from 'react-redux';
+
+const CommentSection = ({ logId, comments, userRole, handleCommentSubmit }) => {
+  const [newComment, setNewComment] = useState('');
+  const darkMode = useSelector(state => state.theme.darkMode);
+
+  const onSubmit = () => {
+    if (newComment.trim()) {
+      handleCommentSubmit(logId, newComment);
+      setNewComment('');
+    }
+  };
+
+  return (
+    <div className={`${darkMode ? styles.darkMode : ''}`}>
+      <div className={`${styles.commentSectionContainer}`}>
+        <h2 className={`${styles.commentSectionTitle}`}>Interaction / Comments</h2>
+
+        <div className={`${styles.commentList}`}>
+          {comments.length === 0 && (
+            <p className={`${styles.noComments}`}>No comments yet. Start the conversation!</p>
+          )}
+          {comments.map(comment => (
+            <div key={comment.id} className={`${styles.commentCard}`}>
+              <div className={`${styles.commentHeader}`}>
+                <IconByRole role={comment.role} className={`${styles.commentIcon}`} />
+                <span className={`${styles.commentAuthor}`}>{comment.author}</span>
+                <Tag colorClass={styles.commentRoleTag}>{comment.role}</Tag>
+              </div>
+              <p className={`${styles.commentText}`}>{comment.text}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className={`${styles.commentInputWrapper}`}>
+          <textarea
+            rows="2"
+            placeholder={`Leave a comment to interact... (As ${userRole})`}
+            value={newComment}
+            onChange={e => setNewComment(e.target.value)}
+            className={`${styles.commentTextarea}`}
+          ></textarea>
+          <button
+            onClick={onSubmit}
+            disabled={!newComment.trim()}
+            className={`${styles.commentSubmitBtn} ${
+              !newComment.trim() ? styles.commentSubmitDisabled : ''
+            }`}
+          >
+            <MessageSquare className={`${styles.submitIcon}`} />
+            Comment
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CommentSection.propTypes = {
+  logId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  comments: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      role: PropTypes.string.isRequired,
+      author: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  userRole: PropTypes.string.isRequired,
+  handleCommentSubmit: PropTypes.func.isRequired,
+};
+
+export default CommentSection;

src/components/ActivityLog/CreateLogForm.jsx

@@ -0,0 +1,153 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { CheckCircle, Send } from 'lucide-react';
+import styles from './styles/CreateLogForm.module.css';
+import { MOCK_USERS } from './MockLogs';
+import { useSelector } from 'react-redux';
+
+const CreateLogForm = ({ userRole, currentUserName, setViewMode, handleAddLog }) => {
+  const isSupport = userRole === 'Support';
+  const roleName = isSupport ? 'Support Member' : 'Student';
+
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const [formData, setFormData] = useState({
+    logContent: '',
+    course: 'Course A',
+    notesToTeacher: '',
+  });
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleChange = e => {
+    const { id, value } = e.target;
+    setFormData(prev => ({ ...prev, [id]: value }));
+    setError(null);
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+
+    if (!formData.logContent.trim()) {
+      setError('Log Content is required to submit a log entry.');
+      return;
+    }
+
+    const newLog = {
+      id: Date.now(),
+      submittedBy: currentUserName,
+      role: userRole,
+      timestamp: new Date().toISOString(),
+      logContent: formData.logContent,
+      course: formData.course,
+      notesToTeacher: formData.notesToTeacher || 'N/A',
+      assistedBy: isSupport ? { name: currentUserName, role: 'Support' } : null,
+      studentName: isSupport ? 'Young Learner Placeholder' : currentUserName,
+      studentRole: isSupport ? 'Unknown Grade' : MOCK_USERS.student.role,
+      teacher: isSupport ? 'Educator to be assigned' : MOCK_USERS.educator.name,
+      teacherFeedback: null,
+      comments: [],
+    };
+
+    handleAddLog(newLog);
+
+    setIsSubmitted(true);
+    setFormData({ logContent: '', course: 'Course A', notesToTeacher: '' });
+
+    setTimeout(() => {
+      setIsSubmitted(false);
+      if (setViewMode) setViewMode('viewer');
+    }, 2000);
+  };
+
+  return (
+    <div className={`${darkMode ? styles.darkMode : ''}`}>
+      <div className={`${styles.formContainer}`}>
+        <h2 className={`${styles.title}`}>Create Daily Log</h2>
+        <p className={`${styles.description}`}>
+          Add your log details below. Currently acting as a{' '}
+          <strong className={`${styles.roleName}`}>{roleName}</strong>.
+        </p>
+
+        {isSubmitted && (
+          <div className={`${styles.successMessage}`} role="alert">
+            <CheckCircle className={`${styles.icon}`} />
+            <span className={`${styles.bold}`}>Success!</span> Log entry submitted successfully.
+            Switching back to Viewer...
+          </div>
+        )}
+
+        {error && (
+          <div className={`${styles.errorMessage}`} role="alert">
+            <span className={`${styles.bold}`}>Error:</span> {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className={`${styles.formGrid}`}>
+          <div>
+            <label htmlFor="logContent" className={`${styles.label}`}>
+              Log Content
+            </label>
+            <textarea
+              id="logContent"
+              rows="4"
+              placeholder="Enter your log here"
+              value={formData.logContent}
+              onChange={handleChange}
+              className={`${styles.textarea}`}
+            ></textarea>
+          </div>
+
+          <div className={`${styles.rightColumn}`}>
+            <div>
+              <label htmlFor="course" className={`${styles.label}`}>
+                Course/Assignment Selection
+              </label>
+              <select
+                id="course"
+                value={formData.course}
+                onChange={handleChange}
+                className={`${styles.select}`}
+              >
+                <option value="Course A">Course A</option>
+                <option value="Course B">Course B</option>
+                <option value="General Log">General Log</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="notesToTeacher" className={`${styles.label}`}>
+                Notes to Teacher (Optional)
+              </label>
+              <input
+                type="text"
+                id="notesToTeacher"
+                placeholder="Add any notes for the teacher here"
+                value={formData.notesToTeacher}
+                onChange={handleChange}
+                className={`${styles.input}`}
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={isSubmitted || !formData.logContent.trim()}
+              className={`${styles.submitBtn} ${isSubmitted ? styles.disabledBtn : ''}`}
+            >
+              <Send className={`${styles.icon}`} />
+              <span>{isSubmitted ? 'Submitting...' : 'Submit Log'}</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+CreateLogForm.propTypes = {
+  userRole: PropTypes.string.isRequired,
+  currentUserName: PropTypes.string.isRequired,
+  setViewMode: PropTypes.func,
+  handleAddLog: PropTypes.func.isRequired,
+};
+
+export default CreateLogForm;