Changes before error encountered

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>

frontends/nextjs/src/components/atoms/controls/Button.tsx

@@ -3,14 +3,25 @@
 import { forwardRef } from 'react'
 import { Button as MuiButton, ButtonProps as MuiButtonProps, CircularProgress } from '@mui/material'
 
+/** Button visual style variants */
 export type ButtonVariant = 'contained' | 'outlined' | 'text' | 'destructive' | 'ghost'
+
+/** Button size options */
 export type ButtonSize = 'small' | 'medium' | 'large' | 'icon'
 
+/**
+ * Props for the Button component
+ * @extends {MuiButtonProps} Inherits Material-UI Button props
+ */
 export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {
+  /** Visual style variant of the button */
   variant?: ButtonVariant
+  /** Size of the button */
   size?: ButtonSize
+  /** Whether to show a loading spinner */
   loading?: boolean
-  asChild?: boolean // Compatibility prop - ignored
+  /** Compatibility prop - ignored */
+  asChild?: boolean
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(

frontends/nextjs/src/components/atoms/controls/Checkbox.tsx

@@ -7,7 +7,12 @@ import {
   FormControlLabel,
 } from '@mui/material'
 
+/**
+ * Props for the Checkbox component
+ * @extends {MuiCheckboxProps} Inherits Material-UI Checkbox props
+ */
 export interface CheckboxProps extends MuiCheckboxProps {
+  /** Optional label text to display next to the checkbox */
   label?: string
 }
 

frontends/nextjs/src/components/atoms/controls/Switch.tsx

@@ -8,7 +8,12 @@ import {
 
 type MuiSwitchProps = ComponentProps<typeof MuiSwitch>
 
+/**
+ * Props for the Switch component
+ * @extends {MuiSwitchProps} Inherits Material-UI Switch props
+ */
 export interface SwitchProps extends MuiSwitchProps {
+  /** Optional label text to display next to the switch */
   label?: string
 }
 

frontends/nextjs/src/components/atoms/display/Avatar.tsx

@@ -8,10 +8,17 @@ import {
   AvatarGroupProps as MuiAvatarGroupProps,
 } from '@mui/material'
 
+/** Avatar size options */
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
+/**
+ * Props for the Avatar component
+ * @extends {MuiAvatarProps} Inherits Material-UI Avatar props
+ */
 export interface AvatarProps extends Omit<MuiAvatarProps, 'sizes'> {
+  /** Size of the avatar (xs: 24px, sm: 32px, md: 40px, lg: 56px, xl: 80px) */
   size?: AvatarSize
+  /** Fallback text to display when no image is provided */
   fallback?: string
 }
 

frontends/nextjs/src/components/atoms/display/Badge.tsx

@@ -3,9 +3,15 @@
 import { forwardRef, HTMLAttributes } from 'react'
 import { Chip, ChipProps } from '@mui/material'
 
+/** Badge visual style variants */
 export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning'
 
+/**
+ * Props for the Badge component
+ * @extends {ChipProps} Inherits Material-UI Chip props
+ */
 export interface BadgeProps extends Omit<ChipProps, 'variant'> {
+  /** Visual style variant of the badge */
   variant?: BadgeVariant
 }
 

frontends/nextjs/src/components/atoms/display/IconButton.tsx

@@ -6,9 +6,15 @@ import {
   IconButtonProps as MuiIconButtonProps,
 } from '@mui/material'
 
+/** IconButton size options */
 export type IconButtonSize = 'small' | 'medium' | 'large'
 
+/**
+ * Props for the IconButton component
+ * @extends {MuiIconButtonProps} Inherits Material-UI IconButton props
+ */
 export interface IconButtonProps extends MuiIconButtonProps {
+  /** Visual style variant of the icon button */
   variant?: 'default' | 'outlined' | 'contained'
 }
 

frontends/nextjs/src/components/atoms/display/Label.tsx

@@ -3,8 +3,14 @@
 import { forwardRef, LabelHTMLAttributes } from 'react'
 import { Typography } from '@mui/material'
 
+/**
+ * Props for the Label component
+ * @extends {LabelHTMLAttributes} Inherits HTML label element attributes
+ */
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /** Whether to display a required indicator (*) */
   required?: boolean
+  /** Whether to style the label as an error state */
   error?: boolean
 }
 

frontends/nextjs/src/components/atoms/feedback/Progress.tsx

@@ -10,7 +10,12 @@ import {
   Typography,
 } from '@mui/material'
 
+/**
+ * Props for the Progress component
+ * @extends {LinearProgressProps} Inherits Material-UI LinearProgress props
+ */
 export interface ProgressProps extends LinearProgressProps {
+  /** Whether to display a percentage label next to the progress bar */
   showLabel?: boolean
 }
 

frontends/nextjs/src/components/atoms/feedback/Separator.tsx

@@ -3,7 +3,12 @@
 import { forwardRef } from 'react'
 import { Divider, DividerProps } from '@mui/material'
 
+/**
+ * Props for the Separator component
+ * @extends {DividerProps} Inherits Material-UI Divider props
+ */
 export interface SeparatorProps extends DividerProps {
+  /** Whether the separator is decorative (for accessibility) */
   decorative?: boolean
 }
 

frontends/nextjs/src/components/atoms/feedback/Skeleton.tsx

@@ -5,7 +5,12 @@ import { Skeleton as MuiSkeleton } from '@mui/material'
 
 type MuiSkeletonProps = ComponentProps<typeof MuiSkeleton>
 
+/**
+ * Props for the Skeleton component
+ * @extends {MuiSkeletonProps} Inherits Material-UI Skeleton props
+ */
 export interface SkeletonProps extends MuiSkeletonProps {
+  /** CSS class name for custom styling */
   className?: string
 }
 

frontends/nextjs/src/components/atoms/feedback/Spinner.tsx

@@ -3,10 +3,17 @@
 import { forwardRef } from 'react'
 import { CircularProgress, CircularProgressProps, Box } from '@mui/material'
 
+/** Spinner size options */
 export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg'
 
+/**
+ * Props for the Spinner component
+ * @extends {CircularProgressProps} Inherits Material-UI CircularProgress props
+ */
 export interface SpinnerProps extends Omit<CircularProgressProps, 'size'> {
+  /** Size of the spinner (xs: 16px, sm: 20px, md: 24px, lg: 40px) or a custom number */
   size?: SpinnerSize | number
+  /** Whether to center the spinner in its container */
   centered?: boolean
 }
 

frontends/nextjs/src/components/atoms/feedback/Tooltip.tsx

@@ -7,15 +7,27 @@ import {
 
 type MuiTooltipProps = ComponentProps<typeof MuiTooltip>
 
+/**
+ * Props for the Tooltip component
+ */
 export interface TooltipProps {
+  /** The element that triggers the tooltip */
   children: ReactElement
+  /** Title or main content of the tooltip */
   title?: ReactNode
+  /** Alias for title - main content of the tooltip */
   content?: ReactNode
+  /** Position of the tooltip relative to its trigger */
   side?: 'top' | 'right' | 'bottom' | 'left'
+  /** Delay in milliseconds before showing the tooltip */
   delayDuration?: number
+  /** Whether to display an arrow pointing to the trigger element */
   arrow?: boolean
+  /** Controlled open state */
   open?: boolean
+  /** Callback when tooltip is opened */
   onOpen?: () => void
+  /** Callback when tooltip is closed */
   onClose?: () => void
 }
 

frontends/nextjs/src/components/atoms/inputs/Input.tsx

@@ -3,8 +3,14 @@
 import { forwardRef } from 'react'
 import { InputBase, InputBaseProps } from '@mui/material'
 
+/**
+ * Props for the Input component
+ * @extends {InputBaseProps} Inherits Material-UI InputBase props
+ */
 export interface InputProps extends Omit<InputBaseProps, 'size'> {
+  /** Whether the input is in an error state */
   error?: boolean
+  /** Whether the input should take up the full width of its container */
   fullWidth?: boolean
 }
 

frontends/nextjs/src/components/ui/atoms/controls/Button.tsx

@@ -3,15 +3,26 @@
 import { forwardRef, type AnchorHTMLAttributes } from 'react'
 import { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material'
 
+/** Button visual style variants */
 export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+
+/** Button size options */
 export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon'
 
+/**
+ * Props for the Button component
+ * @extends {MuiButtonProps} Inherits Material-UI Button props
+ */
 export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {
+  /** Visual style variant of the button */
   variant?: ButtonVariant
+  /** Size of the button */
   size?: ButtonSize
+  /** Compatibility prop - ignored */
   asChild?: boolean
-  // Support link props when component="a"
+  /** Target attribute for link buttons */
   target?: AnchorHTMLAttributes<HTMLAnchorElement>['target']
+  /** Rel attribute for link buttons */
   rel?: AnchorHTMLAttributes<HTMLAnchorElement>['rel']
 }
 

frontends/nextjs/src/components/ui/atoms/controls/Checkbox.tsx

@@ -3,8 +3,14 @@
 import { forwardRef } from 'react'
 import { Checkbox as MuiCheckbox, CheckboxProps as MuiCheckboxProps } from '@mui/material'
 
+/**
+ * Props for the Checkbox component
+ * @extends {MuiCheckboxProps} Inherits Material-UI Checkbox props
+ */
 export interface CheckboxProps extends Omit<MuiCheckboxProps, 'onChange'> {
+  /** Callback when checked state changes (alternative to onChange) */
   onCheckedChange?: (checked: boolean) => void
+  /** Standard onChange handler */
   onChange?: MuiCheckboxProps['onChange']
 }
 

frontends/nextjs/src/components/ui/atoms/controls/Slider.tsx

@@ -3,6 +3,10 @@
 import { forwardRef } from 'react'
 import { Slider as MuiSlider, SliderProps as MuiSliderProps } from '@mui/material'
 
+/**
+ * Props for the Slider component
+ * @extends {MuiSliderProps} Inherits Material-UI Slider props
+ */
 export type SliderProps = MuiSliderProps
 
 const Slider = forwardRef<HTMLSpanElement, SliderProps>(

frontends/nextjs/src/components/ui/atoms/controls/Switch.tsx

@@ -3,8 +3,14 @@
 import { forwardRef } from 'react'
 import { Switch as MuiSwitch, SwitchProps as MuiSwitchProps } from '@mui/material'
 
+/**
+ * Props for the Switch component
+ * @extends {MuiSwitchProps} Inherits Material-UI Switch props
+ */
 export interface SwitchProps extends Omit<MuiSwitchProps, 'onChange'> {
+  /** Callback when checked state changes (alternative to onChange) */
   onCheckedChange?: (checked: boolean) => void
+  /** Standard onChange handler */
   onChange?: MuiSwitchProps['onChange']
 }
 

frontends/nextjs/src/components/ui/atoms/controls/Toggle.tsx

@@ -4,13 +4,24 @@ import { forwardRef } from 'react'
 import { IconButton, IconButtonProps } from '@mui/material'
 import { ToggleButton as MuiToggleButton, ToggleButtonProps as MuiToggleButtonProps } from '@mui/material'
 
+/** Toggle button visual style variants */
 export type ToggleVariant = 'default' | 'outline'
+
+/** Toggle button size options */
 export type ToggleSize = 'default' | 'sm' | 'lg'
 
+/**
+ * Props for the Toggle component
+ * @extends {MuiToggleButtonProps} Inherits Material-UI ToggleButton props
+ */
 export interface ToggleProps extends Omit<MuiToggleButtonProps, 'size'> {
+  /** Visual style variant of the toggle button */
   variant?: ToggleVariant
+  /** Size of the toggle button */
   size?: ToggleSize
+  /** Controlled pressed state */
   pressed?: boolean
+  /** Callback when pressed state changes */
   onPressedChange?: (pressed: boolean) => void
 }
 

frontends/nextjs/src/components/ui/atoms/display/Avatar.tsx

@@ -3,6 +3,10 @@
 import { forwardRef } from 'react'
 import { Avatar as MuiAvatar, AvatarProps as MuiAvatarProps } from '@mui/material'
 
+/**
+ * Props for the Avatar component
+ * @extends {MuiAvatarProps} Inherits Material-UI Avatar props
+ */
 export type AvatarProps = MuiAvatarProps
 
 const Avatar = forwardRef<HTMLDivElement, AvatarProps>(

frontends/nextjs/src/components/ui/atoms/display/Badge.tsx

@@ -3,12 +3,20 @@
 import { forwardRef, ReactNode } from 'react'
 import { Chip, ChipProps, SxProps, Theme } from '@mui/material'
 
+/** Badge visual style variants */
 export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
 
+/**
+ * Props for the Badge component
+ */
 export interface BadgeProps {
+  /** Visual style variant of the badge */
   variant?: BadgeVariant
+  /** Content to display inside the badge */
   children?: ReactNode
+  /** CSS class name for custom styling */
   className?: string
+  /** Custom styles for the badge */
   sx?: SxProps<Theme>
 }
 

frontends/nextjs/src/components/ui/atoms/display/Label.tsx

@@ -3,8 +3,14 @@
 import { forwardRef, LabelHTMLAttributes, ReactNode } from 'react'
 import { FormLabel, FormLabelProps } from '@mui/material'
 
+/**
+ * Props for the Label component
+ * @extends {FormLabelProps} Inherits Material-UI FormLabel props
+ */
 export interface LabelProps extends FormLabelProps {
+  /** ID of the form element this label is associated with */
   htmlFor?: string
+  /** Content to display inside the label */
   children?: ReactNode
 }
 

frontends/nextjs/src/components/ui/atoms/feedback/Progress.tsx

@@ -3,7 +3,12 @@
 import { forwardRef } from 'react'
 import { LinearProgress, LinearProgressProps, CircularProgress, CircularProgressProps } from '@mui/material'
 
+/**
+ * Props for the Progress component
+ * @extends {LinearProgressProps} Inherits Material-UI LinearProgress props
+ */
 export interface ProgressProps extends LinearProgressProps {
+  /** Progress value (0-100) for determinate mode */
   value?: number
 }
 

frontends/nextjs/src/components/ui/atoms/feedback/Separator.tsx

@@ -3,8 +3,14 @@
 import { forwardRef } from 'react'
 import { Divider, DividerProps } from '@mui/material'
 
+/**
+ * Props for the Separator component
+ * @extends {DividerProps} Inherits Material-UI Divider props
+ */
 export interface SeparatorProps extends DividerProps {
+  /** Direction of the separator */
   orientation?: 'horizontal' | 'vertical'
+  /** Whether the separator is decorative (for accessibility) */
   decorative?: boolean
 }
 

frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.tsx

@@ -3,6 +3,10 @@
 import { forwardRef } from 'react'
 import { Skeleton as MuiSkeleton, SkeletonProps as MuiSkeletonProps } from '@mui/material'
 
+/**
+ * Props for the Skeleton component
+ * @extends {MuiSkeletonProps} Inherits Material-UI Skeleton props
+ */
 export type SkeletonProps = MuiSkeletonProps
 
 const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(

frontends/nextjs/src/components/ui/atoms/inputs/Input.tsx

@@ -3,7 +3,12 @@
 import { forwardRef, InputHTMLAttributes } from 'react'
 import { InputBase } from '@mui/material'
 
+/**
+ * Props for the Input component
+ * @extends {InputHTMLAttributes} Inherits HTML input element attributes
+ */
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Whether the input is in an error state */
   error?: boolean
 }
 

frontends/nextjs/src/components/ui/atoms/inputs/Textarea.tsx

@@ -3,23 +3,43 @@
 import { forwardRef } from 'react'
 import { InputBase, InputBaseProps } from '@mui/material'
 
+/**
+ * Props for the Textarea component
+ */
 export interface TextareaProps {
+  /** Whether the textarea is in an error state */
   error?: boolean
+  /** Whether the textarea is disabled */
   disabled?: boolean
+  /** Placeholder text to display when empty */
   placeholder?: string
+  /** Controlled value */
   value?: string
+  /** Default value for uncontrolled mode */
   defaultValue?: string
+  /** Callback when value changes */
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+  /** Callback when textarea loses focus */
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void
+  /** Callback when textarea receives focus */
   onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void
+  /** Form field name */
   name?: string
+  /** Element ID */
   id?: string
+  /** Number of visible rows */
   rows?: number
+  /** Minimum number of rows (for auto-resize) */
   minRows?: number
+  /** Maximum number of rows (for auto-resize) */
   maxRows?: number
+  /** CSS class name for custom styling */
   className?: string
+  /** Whether the field is required */
   required?: boolean
+  /** Whether the textarea is read-only */
   readOnly?: boolean
+  /** Whether to auto-focus on mount */
   autoFocus?: boolean
 }