Feat/userstory5/styles

components/classes/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Class Management Components and Utilities
+ * Centralized exports for all class-related UI components and utility functions
+ */
+
+// Re-export core types for convenience (only if they exist)
+// export type { Class, CreateClassRequest, UpdateClassRequest, ClassValidationResult } from '../../src/types/class';
+
+// Note: Class management UI components and utilities are not yet implemented
+// This file serves as a placeholder for future class management exports
+
+export {}; // Empty export to make this a valid module

components/ui/ConfirmButton.tsx

@@ -332,6 +332,7 @@ ConfirmButton.Danger = (props: Omit<ConfirmButtonProps, 'variant' | 'requireConf
     confirmationMessage={props.confirmationMessage || 'This action cannot be undone. Are you sure?'}
   />
 );
+ConfirmButton.Danger.displayName = 'ConfirmButton.Danger';
 
 /**
  * ConfirmButton.Delete - Delete-specific button
@@ -346,5 +347,6 @@ ConfirmButton.Delete = (props: Omit<ConfirmButtonProps, 'variant' | 'requireConf
     Delete
   </ConfirmButton>
 );
+ConfirmButton.Delete.displayName = 'ConfirmButton.Delete';
 
 export default ConfirmButton;

components/ui/RequiredFieldLabel.tsx

@@ -205,6 +205,7 @@ RequiredFieldLabel.Asterisk = ({
     *
   </span>
 );
+RequiredFieldLabel.Asterisk.displayName = 'RequiredFieldLabel.Asterisk';
 
 /**
  * RequiredFieldLabel.Text - Standalone required text component
@@ -220,6 +221,7 @@ RequiredFieldLabel.Text = ({
     ({children})
   </span>
 );
+RequiredFieldLabel.Text.displayName = 'RequiredFieldLabel.Text';
 
 /**
  * RequiredFieldLabel.Optional - Optional field indicator
@@ -235,5 +237,6 @@ RequiredFieldLabel.Optional = ({
     ({children})
   </span>
 );
+RequiredFieldLabel.Optional.displayName = 'RequiredFieldLabel.Optional';
 
 export default RequiredFieldLabel;

components/ui/StudentAvatar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import { 
   formatStudentName, 
   generateStudentInitials, 
@@ -187,10 +188,11 @@ const StudentAvatar: React.FC<StudentAvatarProps> = ({
     >
       {/* Avatar Image */}
       {avatarUrl && (
-        <img
+        <Image
           src={avatarUrl}
           alt={accessibilityLabel}
-          className="w-full h-full object-cover"
+          fill
+          className="object-cover"
           onError={handleImageError}
         />
       )}

components/ui/StudentBadge.tsx

@@ -307,19 +307,22 @@ const StudentBadge: React.FC<StudentBadgeProps> & {
 StudentBadge.Status = (props: Omit<StudentBadgeProps, 'status'> & { status: NonNullable<StudentBadgeProps['status']> }) => (
   <StudentBadge {...props} showDot />
 );
+StudentBadge.Status.displayName = 'StudentBadge.Status';
 
 /**
  * StudentBadge.Grade - Grade-specific badge
  */
 StudentBadge.Grade = (props: Omit<StudentBadgeProps, 'grade'> & { grade: NonNullable<StudentBadgeProps['grade']> }) => (
   <StudentBadge {...props} variant="primary" />
 );
+StudentBadge.Grade.displayName = 'StudentBadge.Grade';
 
 /**
  * StudentBadge.Attendance - Attendance-specific badge
  */
 StudentBadge.Attendance = (props: Omit<StudentBadgeProps, 'attendance'> & { attendance: NonNullable<StudentBadgeProps['attendance']> }) => (
   <StudentBadge {...props} showDot size="small" />
 );
+StudentBadge.Attendance.displayName = 'StudentBadge.Attendance';
 
 export default StudentBadge;

components/ui/ValidationMessage.tsx

@@ -258,26 +258,30 @@ const ValidationMessage: React.FC<ValidationMessageProps> & {
 ValidationMessage.Error = (props: Omit<ValidationMessageProps, 'type'>) => (
   <ValidationMessage {...props} type="error" />
 );
+ValidationMessage.Error.displayName = 'ValidationMessage.Error';
 
 /**
  * ValidationMessage.Success - Shorthand for success messages
  */
 ValidationMessage.Success = (props: Omit<ValidationMessageProps, 'type'>) => (
   <ValidationMessage {...props} type="success" />
 );
+ValidationMessage.Success.displayName = 'ValidationMessage.Success';
 
 /**
  * ValidationMessage.Warning - Shorthand for warning messages
  */
 ValidationMessage.Warning = (props: Omit<ValidationMessageProps, 'type'>) => (
   <ValidationMessage {...props} type="warning" />
 );
+ValidationMessage.Warning.displayName = 'ValidationMessage.Warning';
 
 /**
  * ValidationMessage.Info - Shorthand for info messages
  */
 ValidationMessage.Info = (props: Omit<ValidationMessageProps, 'type'>) => (
   <ValidationMessage {...props} type="info" />
 );
+ValidationMessage.Info.displayName = 'ValidationMessage.Info';
 
 export default ValidationMessage;