client/src/components/EmployeeModal.jsx

@@ -4,6 +4,8 @@ import CpasBadge, { getTier } from './CpasBadge';
 import NegateModal from './NegateModal';
 import EditEmployeeModal from './EditEmployeeModal';
 import AmendViolationModal from './AmendViolationModal';
+import ExpirationTimeline from './ExpirationTimeline';
+import EmployeeNotes from './EmployeeNotes';
 
 const s = {
   overlay: {
@@ -201,7 +203,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
                   </div>
                   <div style={{ ...s.scoreCard, minWidth: '140px' }}>
                     <div style={{ fontSize: '13px', fontWeight: 700, color: tier?.color || '#f8f9fa' }}>
-                      {tier ? tier.label : '—'}
+                      {tier ? tier.label : '–'}
                     </div>
                     <div style={s.scoreLbl}>Current Tier</div>
                   </div>
@@ -209,6 +211,23 @@ export default function EmployeeModal({ employeeId, onClose }) {
               )}
               {score && <CpasBadge points={score.active_points} style={{ marginBottom: '20px' }} />}
 
+              {/* ── Employee Notes ── */}
+              {employee && (
+                <EmployeeNotes
+                  employeeId={employeeId}
+                  initialNotes={employee.notes}
+                  onSaved={(notes) => setEmployee(prev => ({ ...prev, notes }))}
+                />
+              )}
+
+              {/* ── Expiration Timeline ── */}
+              {score && score.active_points > 0 && (
+                <ExpirationTimeline
+                  employeeId={employeeId}
+                  currentPoints={score.active_points}
+                />
+              )}
+
               {/* ── Active Violations ── */}
               <div style={s.sectionHd}>Active Violations</div>
               {active.length === 0 ? (