Metas feature

client/cucumber.js

@@ -1,3 +1,5 @@
+process.env.TS_NODE_PROJECT = 'tsconfig.test.json';
+
 module.exports = {
   default: {
     require: [

client/package.json

@@ -8,11 +8,13 @@
     "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",
+    "@types/cucumber": "^6.0.1",
     "@types/jest": "^30.0.0",
+    "@types/node": "^24.10.1",
     "@types/puppeteer": "^5.4.7",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

client/src/App.css

@@ -59,6 +59,18 @@ body {
   gap: 0.5rem;
 }
 
+.success-message {
+  background-color: #f0fff4;
+  color: #065f46;
+  border: 1px solid #34d399;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 /* Student Form */
 .student-form {
   background: white;
@@ -771,6 +783,76 @@ tbody tr:last-child td {
   background-color: #2563eb;
 }
 
+/* Metas action button in classes list (yellow, same scale as other action buttons) */
+.metas-btn {
+  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+  color: white;
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+  min-width: auto;
+  border-radius: 4px;
+}
+
+.metas-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
+}
+
+/* Slight vertical offset so Metas button doesn't sit flush with Edit */
+.metas-btn { position: relative; top: 2px; }
+
+/* Metas modal buttons */
+.meta-add-btn {
+  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); /* green */
+  color: white;
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+}
+.meta-add-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(72,187,120,0.2); }
+
+.meta-edit-btn {
+  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); /* yellow */
+  color: white;
+  padding: 0.45rem 0.9rem;
+  font-size: 0.85rem;
+  border-radius: 6px;
+  margin-left: 0.25rem;
+}
+.meta-edit-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(245,158,11,0.2); }
+
+.meta-delete-btn {
+  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); /* red */
+  color: white;
+  padding: 0.45rem 0.9rem;
+  font-size: 0.85rem;
+  border-radius: 6px;
+  margin-left: 0.25rem;
+}
+.meta-delete-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(245,101,101,0.2); }
+
+/* Create metas: same visual as primary submit button */
+.meta-create-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: rgb(255, 255, 255);
+  padding: 0.75rem 1.5rem;
+  border-radius: 6px;
+  font-weight: 600;
+}
+
+/* Make metas modal input a bit larger */
+.metas-modal-content .add-meta-row input {
+  width: 60%;
+  padding: 1rem;
+  font-size: 1rem;
+  border: 2px solid #d1d5db;
+  border-radius: 6px;
+}
+
+.metas-modal-content .add-meta-row button { min-width: 80px; }
+
+.local-metas-list { list-style: none; margin-top: 1rem; padding-left: 0; }
+.local-meta-item { display:flex; justify-content:space-between; align-items:center; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; }
+
 /* Evaluations Table */
 .evaluations-table {
   width: 100%;
@@ -1013,7 +1095,7 @@ tbody tr:last-child td {
   border-collapse: collapse;
   background: white;
   min-width: 800px;
-  table-layout: fixed; /* Fixed layout for uniform column widths */
+  table-layout: auto; /* allow columns to size based on content so long metas can expand */
 }
 
 .student-name-header {
@@ -1040,11 +1122,14 @@ tbody tr:last-child td {
   font-weight: 700;
   font-size: 0.9rem;
   border: 1px solid #047857;
-  width: calc((100% - 200px) / 6); /* Equal width for all 6 goal columns */
+  width: auto; /* allow width to expand based on content */
+  min-width: 160px; /* reasonable minimum for goals */
   text-shadow: 0 1px 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
   vertical-align: middle;
   line-height: 1.2;
+  white-space: normal;
+  word-wrap: break-word;
 }
 
 .student-row:nth-child(even) {
@@ -1089,10 +1174,17 @@ tbody tr:last-child td {
   padding: 12px 8px;
   text-align: center;
   border: 1px solid #cbd5e1;
-  width: calc((100% - 200px) / 6); /* Equal width for all goal columns */
+  width: auto;
+  min-width: 140px;
   vertical-align: middle;
 }
 
+/* Center selects inside evaluation cells */
+.evaluation-cell select { margin: 0 auto; display: block; }
+
+/* Metas modal actions spacing */
+.metas-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1rem; }
+
 .student-row:nth-child(even) .evaluation-cell {
   background-color: #f0f9ff;
 }

client/src/App.tsx

@@ -17,6 +17,7 @@ const App: React.FC = () => {
   const [selectedClass, setSelectedClass] = useState<Class | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string>('');
+  const [success, setSuccess] = useState<string>('');
   const [editingStudent, setEditingStudent] = useState<Student | null>(null);
   const [activeTab, setActiveTab] = useState<TabType>('students');
 
@@ -109,6 +110,12 @@ const App: React.FC = () => {
     setError(errorMessage);
   };
 
+  const handleSuccess = (message: string) => {
+    setSuccess(message);
+    // Clear success after a short timeout
+  setTimeout(() => setSuccess(''), 5000);
+  };
+
   return (
     <div className="App">
       <header className="App-header">
@@ -122,6 +129,11 @@ const App: React.FC = () => {
             <strong>Error:</strong> {error}
           </div>
         )}
+        {success && (
+          <div className="success-message">
+            {success}
+          </div>
+        )}
 
         {/* Tab Navigation */}
         <div className="tab-navigation">
@@ -213,6 +225,7 @@ const App: React.FC = () => {
               onClassUpdated={handleClassUpdated}
               onClassDeleted={handleClassDeleted}
               onError={handleError}
+              onSuccess={handleSuccess}
             />
           )}
         </div>