Roteiros -> Correção e criação

client/cucumber.js

@@ -14,5 +14,21 @@ module.exports = {
     },
     paths: ['src/features/**/*.feature'],
     requireModule: ['ts-node/register']
+  },
+  server: {
+    require: [
+      'ts-node/register',
+      'src/step-definitions/server-newScriptAnswer-steps.ts'
+    ],
+    format: [
+      'progress-bar',
+      'json:reports/cucumber_report.json'
+    ],
+    formatOptions: {
+      snippetInterface: 'async-await'
+    },
+    paths: ['src/features/server-newScriptAnswer-management.feature'],
+    requireModule: ['ts-node/register'],
+    timeout: 30000
   }
 };

client/package.json

@@ -8,7 +8,7 @@
     "react-scripts": "5.0.1"
   },
   "devDependencies": {
-    "@cucumber/cucumber": "^12.2.0",
+    "@cucumber/cucumber": "^12.3.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -18,7 +18,7 @@
     "@types/react-dom": "^18.2.7",
     "expect": "^27.5.1",
     "jest-cucumber": "^4.5.0",
-    "puppeteer": "^24.30.0",
+    "puppeteer": "^24.32.0",
     "ts-node": "^10.9.2",
     "typescript": "^4.9.5"
   },

client/src/App.css

@@ -98,6 +98,17 @@ body {
   background-color: #fff;
 }
 
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #e2e8f0;
+  border-radius: 6px;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+  background-color: #fff;
+  resize: vertical;
+}
+
 .form-group input:focus {
   outline: none;
   border-color: #667eea;

client/src/App.tsx

@@ -1,20 +1,24 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Student } from './types/Student';
-import { Class } from './types/Class';
-import { studentService } from './services/StudentService';
-import ClassService from './services/ClassService';
-import StudentList from './components/StudentList';
-import StudentForm from './components/StudentForm';
-import Evaluations from './components/Evaluations';
-import Classes from './components/Classes';
+import React, { useCallback, useEffect, useState } from 'react';
 import './App.css';
+import Classes from './components/Classes';
+import Evaluations from './components/Evaluations';
+import ScriptsPage from './components/scripts/ScriptsPage';
+import GradingPage from './components/ScriptGrading/GradingPage'
+import StudentForm from './components/StudentForm';
+import StudentList from './components/StudentList';
+import StudentScriptAnswerPage from './components/StudentScriptAnswer/StudentScriptAnswerPage';
+import ClassService from './services/ClassService';
+import { studentService } from './services/StudentService';
+import { Class } from './types/Class';
+import { Student } from './types/Student';
 
-type TabType = 'students' | 'evaluations' | 'classes';
+type TabType = 'students' | 'evaluations' | 'classes' | 'scripts' | 'Script Grading' | 'answer-scripts';
 
 const App: React.FC = () => {
   const [students, setStudents] = useState<Student[]>([]);
   const [classes, setClasses] = useState<Class[]>([]);
   const [selectedClass, setSelectedClass] = useState<Class | null>(null);
+  const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string>('');
   const [editingStudent, setEditingStudent] = useState<Student | null>(null);
@@ -146,6 +150,25 @@ const App: React.FC = () => {
           >
             Classes
           </button>
+          <button
+            className={`tab-button ${activeTab === 'scripts' ? 'active' : ''}`}
+            onClick={() => setActiveTab('scripts')}
+          >
+            Scripts
+          </button>
+          <button
+            className={`tab-button ${activeTab === 'Script Grading' ? 'active' : ''}`}
+            onClick={() => setActiveTab('Script Grading')}
+            data-testid="script-grading-tab"
+          >
+            Script Grading
+          </button>
+          <button
+            className={`tab-button ${activeTab === 'answer-scripts' ? 'active' : ''}`}
+            onClick={() => setActiveTab('answer-scripts')}
+          >
+            Answer Scripts
+          </button>
         </div>
 
         {/* Tab Content */}
@@ -215,6 +238,111 @@ const App: React.FC = () => {
               onError={handleError}
             />
           )}
+
+          {activeTab === 'scripts' && (
+            <ScriptsPage onError={handleError} />
+          )}
+
+          {activeTab === 'Script Grading' && (
+            <GradingPage onError={handleError} />
+          )}
+
+          {activeTab === 'answer-scripts' && (
+            <>
+              {/* Student and Class Selection */}
+              <div style={{ 
+                display: 'flex', 
+                gap: '20px', 
+                marginBottom: '20px',
+                padding: '20px',
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                borderRadius: '10px',
+                color: 'white'
+              }}>
+                <div style={{ flex: 1 }}>
+                  <label htmlFor="student-select" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
+                    Select Student:
+                  </label>
+                  <select
+                    id="student-select"
+                    value={selectedStudent?.cpf || ''}
+                    onChange={(e) => {
+                      const student = students.find(s => s.cpf === e.target.value);
+                      setSelectedStudent(student || null);
+                    }}
+                    style={{
+                      width: '100%',
+                      padding: '10px',
+                      borderRadius: '5px',
+                      border: 'none',
+                      fontSize: '16px'
+                    }}
+                  >
+                    <option value="">-- Choose a student --</option>
+                    {students.map((student) => (
+                      <option key={student.cpf} value={student.cpf}>
+                        {student.name} ({student.cpf})
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div style={{ flex: 1 }}>
+                  <label htmlFor="class-select-answer" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
+                    Select Class:
+                  </label>
+                  <select
+                    id="class-select-answer"
+                    value={selectedClass ? `${selectedClass.topic}-${selectedClass.year}-${selectedClass.semester}` : ''}
+                    onChange={(e) => {
+                      const classId = e.target.value;
+                      if (classId) {
+                        const classObj = classes.find(c => `${c.topic}-${c.year}-${c.semester}` === classId);
+                        setSelectedClass(classObj || null);
+                      } else {
+                        setSelectedClass(null);
+                      }
+                    }}
+                    style={{
+                      width: '100%',
+                      padding: '10px',
+                      borderRadius: '5px',
+                      border: 'none',
+                      fontSize: '16px'
+                    }}
+                  >
+                    <option value="">-- Choose a class --</option>
+                    {classes.map((classObj) => (
+                      <option 
+                        key={`${classObj.topic}-${classObj.year}-${classObj.semester}`}
+                        value={`${classObj.topic}-${classObj.year}-${classObj.semester}`}
+                      >
+                        {classObj.topic} ({classObj.year}/{classObj.semester})
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              {/* Answer Scripts Interface */}
+              {selectedStudent && selectedClass ? (
+                <StudentScriptAnswerPage
+                  studentCPF={selectedStudent.cpf}
+                  classId={`${selectedClass.topic}-${selectedClass.year}-${selectedClass.semester}`}
+                  onError={handleError}
+                />
+              ) : (
+                <div style={{
+                  padding: '40px',
+                  textAlign: 'center',
+                  fontSize: '18px',
+                  color: '#666'
+                }}>
+                  Please select both a student and a class to begin answering scripts.
+                </div>
+              )}
+            </>
+          )}
         </div>
       </main>
     </div>

client/src/components/ScriptGrading/GradingPage.tsx

@@ -0,0 +1,58 @@
+// pages/GradingPage.tsx
+import React, { useState, useEffect } from "react";
+import { ScriptAnswer } from "../../types/ScriptAnswer";
+import { ScriptAnswerService } from "../../services/ScriptAnswerService";
+import ScriptAnswerGrid from "./ScriptAnswerGrid"
+import ScriptGrading from "./ScriptGrading";
+
+interface Props {
+    onError: (errorMessage: string) => void;
+}
+
+export default function GradingPage({onError}: Props) {
+  const [scriptAnswers, setScriptAnswers] = useState<ScriptAnswer[]>([]);
+  const [selected, setSelected] = useState<ScriptAnswer | null>(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const data = await ScriptAnswerService.getAllScriptAnswers();
+        setScriptAnswers(data);
+      } catch (error) {
+        onError("Failed to load script answers.");
+      }
+    }
+    fetchData();
+  }, []);
+
+  if (selected) {
+    return (
+      <ScriptGrading
+        scriptAnswer={selected}
+        onClose={() => {
+          async function setData() {
+            try {
+              const data = await ScriptAnswerService.getAllScriptAnswers();
+              setScriptAnswers(data);
+            } catch (error) {
+              onError("Failed to load script answers.");
+            }
+          }
+          setData().then(() => {
+            setSelected(null);
+          });
+        }}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <h1 data-testid="grading-page-title">Grade Scripts</h1>
+      <ScriptAnswerGrid
+        scriptAnswers={scriptAnswers}
+        onSelect={(sa) => setSelected(sa)}
+      />
+    </div>
+  );
+}

client/src/components/ScriptGrading/ScriptAnswerGrid.tsx

@@ -0,0 +1,66 @@
+// components/ScriptAnswerGrid.tsx
+import React, { useEffect, useState } from "react";
+import { ScriptAnswer } from "../../types/ScriptAnswer";
+import ScriptService from "../../services/ScriptService";
+
+interface Props {
+  scriptAnswers: ScriptAnswer[];
+  onSelect: (s: ScriptAnswer) => void;
+}
+
+export default function ScriptAnswerGrid({ scriptAnswers, onSelect }: Props) {
+  const [scriptTitles, setScriptTitles] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const loadScriptTitles = async () => {
+      setLoading(true);
+      const titles: Record<string, string> = {};
+
+      for (const sa of scriptAnswers) {
+        try {
+          const script = await ScriptService.getScriptById(sa.scriptId);
+          titles[sa.scriptId] = script.title || sa.scriptId;
+        } catch (error) {
+          console.error(`Failed to load script ${sa.scriptId}:`, error);
+          titles[sa.scriptId] = sa.scriptId; // Fallback to ID if fetch fails
+        }
+      }
+
+      setScriptTitles(titles);
+      setLoading(false);
+    };
+
+    if (scriptAnswers.length > 0) {
+      loadScriptTitles();
+    }
+  }, [scriptAnswers]);
+
+  return (
+    <div style={{
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, 200px)",
+      gap: "10px"
+    }} data-testid="script-answer-grid">
+      {scriptAnswers.map(sa => (
+        <div
+          key={sa.id}
+          data-testid={`script-answer-row-${sa.id}`}
+          onClick={() => onSelect(sa)}
+          style={{
+            padding: "12px",
+            border: "1px solid #ccc",
+            borderRadius: "8px",
+            cursor: "pointer",
+            opacity: loading ? 0.6 : 1,
+          }}
+        >
+          <strong>Script: {loading ? "Loading..." : scriptTitles[sa.scriptId] || sa.scriptId}</strong><br />
+          Student: {sa.student}<br />
+          Class: {sa.classId}<br />
+          Grade: {sa.grade ?? "—"}
+        </div>
+      ))}
+    </div>
+  );
+}