Attempted working dashbaord tablepage

src/components/ClassDetail.jsx

@@ -0,0 +1,149 @@
+import { Calculator, Scale, Printer, AlertCircle } from 'lucide-react';
+import './ClassDetail.css';
+
+export const ClassDetail = ({ classData, onClose }) => {
+  const majorGrades = classData.assignments.filter(a => a.isMajorGrade);
+  const minorGrades = classData.assignments.filter(a => !a.isMajorGrade);
+  
+  const calculateAverage = (grades) => {
+    if (grades.length === 0) return '0.00%';
+    const sum = grades.reduce((acc, g) => {
+      const scoreMatch = g.score.match(/[\d.]+/);
+      const score = scoreMatch ? parseFloat(scoreMatch[0]) : 0;
+      return acc + score;
+    }, 0);
+    return `${(sum / grades.length).toFixed(2)}%`;
+  };
+
+  const getScoreColor = (score) => {
+    const scoreMatch = score.match(/[\d.]+/);
+    const numScore = scoreMatch ? parseFloat(scoreMatch[0]) : 0;
+    if (numScore >= 90) return 'score-excellent';
+    if (numScore >= 80) return 'score-good';
+    if (numScore >= 70) return 'score-average';
+    return 'score-poor';
+  };
+
+  const hasAlert = (score) => {
+    const scoreMatch = score.match(/[\d.]+/);
+    const numScore = scoreMatch ? parseFloat(scoreMatch[0]) : 0;
+    return numScore < 80;
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div className="modal-header">
+          <div className="header-content">
+            <div className="header-left">
+              <h2 className="class-name">{classData.className}</h2>
+              <div className="class-info">
+                <span>{classData.teacher}</span>
+                <span>•</span>
+                <span>{classData.period}</span>
+                <span>•</span>
+                <span className="category-badge">{classData.category}</span>
+              </div>
+            </div>
+            <div className="header-right">
+              <div className="final-grade">
+                {classData.finalGrades?.[0]?.grade || 'N/A'}
+              </div>
+            </div>
+          </div>
+          
+          {/* Action buttons */}
+          <div className="action-buttons">
+            <button className="action-btn">
+              <Calculator size={16} />
+              Calculations
+            </button>
+            <button className="action-btn">
+              <Scale size={16} />
+              Grading Scale
+            </button>
+            <button className="action-btn">
+              <Printer size={16} />
+              Print
+            </button>
+          </div>
+        </div>
+
+        {/* Assignments Table */}
+        <div className="assignments-container">
+          <table className="assignments-table">
+            <thead>
+              <tr>
+                <th>Description</th>
+                <th>Due Date</th>
+                <th>Score</th>
+                <th>Attempts</th>
+              </tr>
+            </thead>
+            <tbody>
+              {/* Major Grades */}
+              {majorGrades.length > 0 && (
+                <>
+                  <tr className="section-header major">
+                    <td colSpan={2}>Major Grades</td>
+                    <td>{calculateAverage(majorGrades)}</td>
+                    <td></td>
+                  </tr>
+                  {majorGrades.map((assignment, idx) => (
+                    <tr key={idx} className="assignment-row">
+                      <td className="assignment-name">
+                        {hasAlert(assignment.score) && (
+                          <AlertCircle size={16} className="alert-icon" />
+                        )}
+                        <span>{assignment.name}</span>
+                      </td>
+                      <td className="due-date">{assignment.dueDate}</td>
+                      <td className={`score ${getScoreColor(assignment.score)}`}>
+                        {assignment.score}
+                      </td>
+                      <td className="attempts">{assignment.attempts}</td>
+                    </tr>
+                  ))}
+                </>
+              )}
+              
+              {/* Minor Grades */}
+              {minorGrades.length > 0 && (
+                <>
+                  <tr className="section-header minor">
+                    <td colSpan={2}>Minor Grades</td>
+                    <td>{calculateAverage(minorGrades)}</td>
+                    <td></td>
+                  </tr>
+                  {minorGrades.map((assignment, idx) => (
+                    <tr key={idx} className="assignment-row">
+                      <td className="assignment-name">
+                        {hasAlert(assignment.score) && (
+                          <AlertCircle size={16} className="alert-icon" />
+                        )}
+                        <span>{assignment.name}</span>
+                      </td>
+                      <td className="due-date">{assignment.dueDate}</td>
+                      <td className={`score ${getScoreColor(assignment.score)}`}>
+                        {assignment.score}
+                      </td>
+                      <td className="attempts">{assignment.attempts}</td>
+                    </tr>
+                  ))}
+                </>
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Footer */}
+        <div className="modal-footer">
+          <button onClick={onClose} className="close-btn">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};