Archivos de la Carpeta src/interface del Frontend #

La carpeta src/interface es el repositorio central para todas las definiciones de tipos (interfaces, enums, types) de tu aplicación. Estas definiciones son cruciales para el uso de TypeScript, ya que proporcionan una estructura clara y un tipado fuerte para los datos que se manejan en el frontend, lo que ayuda a prevenir errores, mejorar la legibilidad del código y facilitar el desarrollo.

student.ts #

Este archivo define los enums y la interfaz Student que tipifican la estructura de los datos de un estudiante en la aplicación. Estos tipos son utilizados en todo el frontend (componentes, hooks, utilidades) para asegurar que la información del estudiante se maneje de forma consistente y segura.

• Descripción: student.ts exporta varios enums para categorías de datos (Sex, Source, CommunicationPreference, School, Course) y una interfaz Student completa que detalla todas las propiedades de un estudiante, incluyendo campos de texto, fechas, opciones de selección, documentos y un ID opcional.
• Propósito: Proporcionar una fuente de verdad única y centralizada para la estructura de los datos de un estudiante y sus campos relacionados. Esto permite el tipado fuerte en TypeScript, lo que facilita la detección de errores en tiempo de desarrollo y mejora la legibilidad del código.
• Funcionalidad clave:
  • enum Sex:
    • Define las opciones de género para los estudiantes ("MASCULINO", "FEMENINO", "OTROS").
  • enum Source:
    • Define las posibles fuentes de contacto o inscripción de los estudiantes ("REDES SOCIALES", "CAPTADOR").
  • enum CommunicationPreference:
    • Define las preferencias de comunicación ("WHATSAPP", "TELÉFONO").
  • enum School:
    • Define los diferentes colegios asociados a los estudiantes. Sus valores son cadenas de texto que corresponden a los nombres completos de los colegios.
  • enum Course:
    • Define los diferentes cursos o niveles académicos. Sus valores son cadenas de texto que corresponden a los nombres completos de los cursos.
  • interface CallStatus:
    • Define la estructura para el estado de una llamada, incluyendo si fue completada y un comentario.
  • type PositiveFeedbackOptions:
    • Define un tipo de unión de literales de cadena que representa todos los posibles estados de feedback positivo que un estudiante puede tener.
  • interface Student:
    • Es la interfaz principal que describe la estructura completa de un objeto estudiante. Contiene una larga lista de propiedades, que incluyen:
      • id?: string;: El identificador único del estudiante. Es opcional (?) porque los nuevos estudiantes aún no tienen un ID asignado por la base de datos hasta que se crean.
      • Campos Básicos (obligatorios): name, lastname, email.
      • Campos Opcionales: rut, sex, birthdate, nationality, address, phone, source, contact, contactDate, call1, call2, call3, comments1, comments2, comments3, school, course, communicationPreference, createdAt.
      • Tipos Específicos: Utiliza los enums definidos en este mismo archivo (Sex, Source, School, Course, CommunicationPreference) y el type PositiveFeedbackOptions.
      • Manejo de Archivos: Incluye propiedades como studentImage, birthCertificate, studyCertificate, linkDni que pueden ser string (para URLs de archivos existentes), File (para archivos recién subidos) o null (para indicar eliminación de archivos).
      • Fechas: birthdate y createdAt son de tipo Date, mientras que contactDate puede ser string | Date (para flexibilidad en el parseo).
• Rol en la aplicación: student.ts es la definición de esquema de datos para la entidad Estudiante. Es fundamental para el desarrollo con TypeScript, ya que asegura que todos los componentes, hooks y utilidades que interactúan con datos de estudiantes lo hagan de forma coherente y tipada, previniendo errores relacionados con la estructura de los datos.

// src/interface/student/student.ts

// Enum para clasificar el sexo de los estudiantes.
export enum Sex {
  Male = "MASCULINO",
  Female = "FEMENINO",
  Other = "OTROS",
}

// Enum para clasificar la fuente de contacto/inscripción de los estudiantes.
export enum Source {
  SocialMedia = "REDES SOCIALES",
  InPerson = "CAPTADOR",
}

// Enum para clasificar la preferencia de comunicación del estudiante.
export enum CommunicationPreference {
  Whatsapp = "WHATSAPP",
  Phone = "TELÉFONO",
}

// Enum para listar los diferentes colegios disponibles.
export enum School {
  Quinta = "QUINTA NORMAL",
  Buin = "BUÍN",
  Granja = "LA GRANJA",
  Nunoa = "ÑUÑOA",
  Pudahuel = "PUDAHUEL", // ¡CORREGIR TYPO A 'PUDAHUEL' SI ES NECESARIO EN TUS DATOS!
  Miguel = "SAN MIGUEL",
}

// Enum para listar los diferentes cursos/niveles académicos.
export enum Course {
  NB1 = "1° NIVEL BÁSICO",
  NB2 = "2° NIVEL BÁSICO",
  NB3 = "3° NIVEL BÁSICO",
  NM1 = "1° NIVEL MEDIO",
  NM2 = "2° NIVEL MEDIO",
}

// Interfaz para el estado de una llamada (ej. en el seguimiento del estudiante).
export interface CallStatus {
  completed: boolean; // Indica si la llamada fue completada
  comment: string | null; // Comentario asociado a la llamada, puede ser nulo
}

// Tipo de unión para las posibles opciones de feedback positivo del estudiante.
type PositiveFeedbackOptions =
  | ""
  | "AÚN SIN RESPUESTAS"
  | "NO SE MATRICULARÁ"
  | "INCONTACTABLE"
  | "PERSONA INTERESADA QUE ENVIARÁ DOCUMENTACIÓN"
  | "PERSONA QUE ENVIÓ DOCUMENTACIÓN PERO LE FALTA FIRMAR SU MATRÍCULA"
  | "PERSONA QUE IRÁ A MATRICULARSE DIRECTAMENTE A LA ESCUELA"
  | "PERSONA CON DOCUMENTACIÓN Y MATRÍCULA FIRMADA EN ESCUELA"
  | "INTERESADA PARA PRÓXIMO AÑO"
  | "PERSONA QUE ENVÍA DOCUMENTACIÓN Y SE DEBE TRASLADAR A OTRA PLANILLA";

/**
 * Interfaz principal para la entidad Estudiante.
 * Define la estructura completa de los datos de un estudiante en la aplicación.
 */
export interface Student {
  id?: string; // Identificador único del estudiante (opcional, generado por el backend al crear)
  name: string; // Nombre del estudiante (obligatorio)
  lastname: string; // Apellido del estudiante (obligatorio)
  rut?: string; // RUT del estudiante (opcional)
  sex?: Sex; // Sexo del estudiante (opcional, utiliza el enum Sex)
  birthdate?: Date; // Fecha de nacimiento (opcional)
  nationality?: string; // Nacionalidad (opcional)
  address?: string; // Dirección (opcional)
  phone?: string; // Teléfono (opcional)
  email?: string; // Correo electrónico (obligatorio)
  source?: Source; // Fuente de contacto (opcional, utiliza el enum Source)
  contact?: string; // Persona que realizó el contacto (opcional)
  contactDate?: string | Date; // Fecha del contacto (opcional, puede ser string o Date)
  call1?: string; // Estado de la llamada 1 (opcional)
  call2?: string; // Estado de la llamada 2 (opcional)
  call3?: string; // Estado de la llamada 3 (opcional)
  comments1?: string; // Comentario de la llamada 1 (opcional)
  comments2?: string; // Comentario de la llamada 2 (opcional)
  comments3?: string; // Comentario de la llamada 3 (opcional)
  positiveFeedback: PositiveFeedbackOptions; // Estado de feedback positivo (utiliza el tipo de unión)
  studentImage?: string | File | null; // Foto del estudiante (URL, File o null para eliminar)
  birthCertificate?: string | File | null; // Certificado de nacimiento (URL, File o null)
  studyCertificate?: string | File | null; // Certificado de estudio (URL, File o null)
  linkDni?: string | File | null; // Enlace/ID de la cédula de identidad (URL, File o null)
  school?: School; // Colegio (opcional, utiliza el enum School)
  course?: Course; // Curso (opcional, utiliza el enum Course)
  communicationPreference?: CommunicationPreference; // Preferencia de comunicación (opcional, utiliza el enum CommunicationPreference)
  createdAt?: Date; // Fecha de creación del registro (opcional)
}

student.list.ts #

Este archivo define la interfaz StudentList y el tipo PositiveFeedbackOptions, utilizados para tipar los datos de estudiantes cuando se presentan en listas o tablas de resumen.

• Descripción: student.list.ts exporta un tipo PositiveFeedbackOptions (una unión de literales de cadena para estados específicos de feedback) y la interfaz StudentList. Esta interfaz es una versión más concisa de la interfaz Student completa, enfocada en los campos esenciales que se necesitan al mostrar una lista de estudiantes.
• Propósito: Proporcionar una definición de tipo clara y ligera para los objetos Estudiante cuando se necesitan representar en un formato de lista. Esto asegura la consistencia del tipado en componentes de tabla (como StudentTable) y reduce la necesidad de incluir todos los campos de la interfaz Student completa cuando no son relevantes para una vista de lista.
• Funcionalidad clave:
  • type PositiveFeedbackOptions: Define una unión de literales de cadena que representa todos los posibles estados de feedback positivo que un estudiante puede tener. Este tipo se deriva directamente de la constante Constants.allFeedbacks (en src/utils/constants.ts), lo que asegura la coherencia con los datos reales y la centralización de las opciones.
  • export interface StudentList:
    • id: string;: El identificador único del estudiante. Es obligatorio aquí, ya que los estudiantes en una lista ya existen y, por lo tanto, tienen un ID asignado.
    • name: string;: El nombre del estudiante.
    • lastname: string;: El apellido del estudiante.
    • rut?: string;: El RUT del estudiante, marcado como opcional.
    • positiveFeedback: PositiveFeedbackOptions;: El estado de feedback del estudiante, utilizando el tipo de unión derivado.
    • school?: School;: El colegio al que pertenece el estudiante (opcional). Se incluye ya que es relevante para la visualización y filtrado en tablas.
    • course?: Course;: El curso al que está asignado el estudiante (opcional). Se incluye ya que es relevante para la visualización y filtrado en tablas.
    • createdAt?: Date;: La fecha de creación del registro del estudiante (opcional). Se incluye ya que es relevante para el ordenamiento en tablas.
• Rol en la aplicación: student.list.ts es fundamental para el tipado de las vistas de lista. Permite que componentes como StudentTable o useStudentsList trabajen con un subconjunto específico y relevante de las propiedades del estudiante, mejorando la legibilidad del código y asegurando que solo se manejen los datos necesarios para esa funcionalidad.

// src/interface/student/student.list.ts

// Importa el objeto Constants para acceder a allFeedbacks
import Constants from "../../utils/constants";
// Importa School y Course, ya que se usan para tipar las propiedades 'school' y 'course'.
// La interfaz Student no se importa directamente aquí porque no se usa como tipo principal en este archivo.
import type { School, Course } from "./student";


// Deriva el tipo de unión para PositiveFeedbackOptions directamente de la constante centralizada.
// Esto asegura que el tipo sea consistente con la lista de opciones que se usa en los selectores.
type PositiveFeedbackOptions = typeof Constants.allFeedbacks[number];

/**
 * Interfaz para tipar los datos de un estudiante cuando se muestran en una lista o tabla.
 * Contiene un subconjunto de las propiedades de la interfaz Student completa,
 * enfocándose en los datos esenciales para una vista de resumen.
 *
 * Nota: Los campos 'school', 'course', y 'createdAt' son incluidos aquí porque son
 * utilizados por el componente StudentTable (y sus filtros/ordenamiento)
 * y deben estar presentes en los datos que StudentTable espera recibir.
 */
export interface StudentList {
  id: string; // Identificador único del estudiante (obligatorio en listas de estudiantes existentes)
  name: string; // Nombre del estudiante
  lastname: string; // Apellido del estudiante
  rut?: string; // RUT del estudiante (opcional)
  positiveFeedback: PositiveFeedbackOptions; // Estado de feedback utilizando el tipo de unión derivado

  // Campos adicionales relevantes para la visualización en tablas y filtros.
  // Son opcionales aquí porque también son opcionales en la interfaz Student principal.
  school?: School;
  course?: Course;
  createdAt?: Date;
}

document.handing.ts #

Este archivo define las interfaces para el hook useDocumentHandling. Específicamente, exporta UseDocumentHandlingHookResult (lo que el hook devuelve) y UseDocumentHandlingHookProps (las propiedades que el hook espera como entrada).

• Descripción: document.handing.ts (nota: handing en el nombre del archivo parece un typo por handling) proporciona las definiciones de tipo para un hook que centraliza la lógica de manipulación de archivos y documentos en formularios. Estas interfaces aseguran que los datos y funciones fluyan de manera segura entre el hook y los componentes que lo utilizan.
• Propósito: Proporcionar tipado estricto para las propiedades y los valores de retorno del hook useDocumentHandling. Esto mejora la claridad de la API del hook, previene errores de tipo y facilita el mantenimiento del código relacionado con la gestión de documentos.
• Funcionalidad clave:
  • export interface UseDocumentHandlingHookResult:
    • Define el contrato de lo que el hook useDocumentHandling retorna (las funciones que expone para el componente que lo consume).
    • handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;: Función para manejar el evento onChange de un <input type="file">.
    • handleDeleteFile: (fieldName: keyof Student) => void;: Función para disparar la eliminación de un archivo por su nombre de campo.
    • getLabelForField: (fieldName: keyof Student) => string;: Función auxiliar para obtener una etiqueta legible para un campo de documento.
  • export interface UseDocumentHandlingHookProps:
    • Define el contrato de las propiedades que el hook useDocumentHandling espera recibir como entrada cuando se instancia.
    • onChange: (e: React.ChangeEvent<HTMLInputElement> | { name: keyof Student; value: File | null }) => void;: Esta propiedad es una función callback que el hook utilizará para notificar a su padre sobre los cambios en los campos de archivo. Es un tipo de unión flexible que acepta tanto eventos de cambio de inputs (React.ChangeEvent<HTMLInputElement>) como un objeto para actualizaciones programáticas (ej., fieldName y value: null para indicar una eliminación).
    • onDeleteFile: (fieldName: keyof Student) => void;: Otra función callback para notificar al padre que se ha solicitado la eliminación de un archivo específico.
• Rol en la aplicación: document.handing.ts es fundamental para el tipado de los hooks utilitarios. Asegura que la comunicación entre el hook useDocumentHandling y los componentes o hooks que lo utilizan sea robusta y esté libre de errores de tipo.

// src/interface/student/document.handing.ts

// Importa 'Student' como tipo para evitar problemas de compilación si no se usa como valor en tiempo de ejecución.
import type { Student } from "./student";
// Importa 'ChangeEvent' y 'FormEvent' explícitamente desde 'react' para tipado de eventos.
import type { ChangeEvent } from 'react';


/**
 * Interfaz que define el tipo de objeto que el hook `useDocumentHandling` retorna.
 * Estas son las funciones y valores que el componente consumidor del hook puede utilizar.
 */
export interface UseDocumentHandlingHookResult {
  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void; // Manejador para el cambio de un input de archivo
  handleDeleteFile: (fieldName: keyof Student) => void; // Manejador para solicitar la eliminación de un archivo
  getLabelForField: (fieldName: keyof Student) => string; // Función para obtener la etiqueta legible de un campo de archivo
}

/**
 * Interfaz que define las propiedades que el hook `useDocumentHandling` espera recibir como entrada.
 * Estas son las funciones callback que el hook usará para comunicarse con su padre.
 */
export interface UseDocumentHandlingHookProps {
  // Manejador de cambio flexible: acepta un evento de input de archivo O un objeto para cambios programáticos.
  onChange: (
    e:
      | ChangeEvent<HTMLInputElement> // Para cuando un archivo se selecciona/cambia desde el input
      | { name: keyof Student; value: File | null } // Para cambios programáticos (ej. marcar un archivo como null)
  ) => void;
  onDeleteFile: (fieldName: keyof Student) => void; // Callback para notificar al padre la solicitud de eliminación de un archivo
}

Archivos de la Carpeta src/interface del Frontend #

La carpeta src/interface es el repositorio central para todas las definiciones de tipos (interfaces, enums, types) de tu aplicación. Estas definiciones son cruciales para el uso de TypeScript, ya que proporcionan una estructura clara y un tipado fuerte para los datos que se manejan en el frontend, lo que ayuda a prevenir errores, mejorar la legibilidad del código y facilitar el desarrollo.

document.dropdown.ts #

Este archivo define las interfaces DropdownOption y DropdownProps, que tipifican la estructura de las opciones individuales y las propiedades de un componente de menú desplegable, respectivamente.

• Descripción: document.dropdown.ts (nombre corregido del archivo) exporta la interfaz DropdownOption para describir cada ítem dentro de un menú (como un curso o un colegio con su ruta asociada) y DropdownProps para las propiedades que un componente de menú desplegable genérico (como DropdownOptions) espera recibir.
• Propósito: Proporcionar definiciones de tipo claras y consistentes para los menús desplegables de navegación. Esto asegura que los datos pasados a los componentes de menú tengan la estructura correcta y que los componentes utilicen las propiedades esperadas.
• Funcionalidad clave:
  • export interface DropdownOption:
    • Define la estructura de un único ítem en un menú desplegable.
    • label: string;: El texto visible de la opción (ej., "1° nivel básico", "Quinta normal").
    • path: string;: La ruta de navegación asociada a la opción (ej., /dashboard/quinta-normal/1nb).
  • export interface DropdownProps:
    • Define las propiedades que el componente que renderiza el menú desplegable espera recibir.
    • options: DropdownOption[];: Un array de objetos DropdownOption, que representa la lista de ítems a mostrar en el menú.
    • className?: string;: Una clase CSS opcional para aplicar al contenedor <ul> del dropdown.
    • style?: CSSProperties;: Un objeto de estilo en línea opcional, utilizado para estilos dinámicos como la altura del dropdown.
• Rol en la aplicación: document.dropdown.ts es fundamental para el tipado de los componentes de menú y navegación. Asegura que componentes como Sidebar y DropdownOptions trabajen con datos estructurados de manera predecible, mejorando la seguridad de tipos y la mantenibilidad de los menús dinámicos.

// src/interface/common/dropdown-options/document.dropdown.ts
// Nota: Se ha corregido el nombre del archivo de 'document.drop.down.ts' a 'document.dropdown.ts'
// y su ubicación para co-localizar con el componente DropdownOptions.

// Importa el tipo CSSProperties de React para la prop 'style'.
import type { CSSProperties } from 'react'; 

/**
 * Interfaz que define la estructura de una opción individual dentro de un menú desplegable.
 * Cada opción tiene una etiqueta visible y una ruta de navegación asociada.
 */
export interface DropdownOption {
  label: string; // Etiqueta de texto visible de la opción
  path: string;  // Ruta de navegación asociada a la opción
}

/**
 * Interfaz que define las propiedades esperadas por un componente de menú desplegable.
 * Se utiliza para el componente DropdownOptions.
 */
export interface DropdownProps {
  options: DropdownOption[]; // Array de opciones a mostrar en el menú

  // Propiedad para aplicar clases CSS al contenedor <ul> del dropdown.
  className?: string; 

  // Propiedad para aplicar estilos en línea dinámicos (ej. altura, overflow) al contenedor <ul>.
  style?: CSSProperties; 
}

add.student-form.props.ts #

Este archivo define la interfaz AddStudentFormProps, que especifica las propiedades (props) que el componente AddStudentForm (ubicado en src/components/common/forms/add-student/add.student.form.tsx) espera recibir.

• Descripción: AddStudentFormProps es una interfaz que garantiza el tipado fuerte para los datos del estudiante (studentData) y los manejadores de eventos (handleChange, handleSubmit) que se pasan al formulario de adición de estudiantes.
• Propósito: Asegurar que el componente AddStudentForm reciba los tipos de datos y funciones correctos de su componente padre (típicamente una página o un hook que gestiona el estado del formulario). Esto mejora la seguridad de tipos, facilita el desarrollo y el mantenimiento del formulario.
• Funcionalidad clave:
  • studentData: Student;:
    • Define que el formulario recibirá un objeto Student. Este objeto contiene los datos actuales de los campos del formulario.
    • La interfaz Student se importa de ./student.ts, asegurando la coherencia con la estructura general de los datos del estudiante.
  • handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;:
    • Define la firma para la función que manejará los cambios en los campos del formulario.
    • Es una función que acepta un evento de cambio (React.ChangeEvent) que puede provenir de un <input> (HTMLInputElement) o de un <select> (HTMLSelectElement), lo cual es crucial para la versatilidad del componente FormInput utilizado dentro del formulario.
  • handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;:
    • Define la firma para la función que manejará el envío del formulario.
    • Es una función que acepta un evento de formulario (React.FormEvent) de un elemento <form> (HTMLFormElement).
• Rol en la aplicación: add.student-form.props.ts es fundamental para el contrato de interfaz entre el componente AddStudentForm y su componente padre. Es una pieza clave en la arquitectura de formularios basados en props, garantizando que los datos fluyan de forma predecible y tipada.

// src/interface/student/add.student.form.props.ts

// Importa 'Student' como tipo para evitar problemas de compilación si no se usa como valor en tiempo de ejecución.
import type { Student } from "./student";
// Importa los tipos específicos de eventos de React que se utilizan en las firmas de las funciones.
import type { ChangeEvent, FormEvent } from 'react';


/**
 * Interfaz que define las propiedades esperadas por el componente `AddStudentForm`.
 */
export interface AddStudentFormProps {
  studentData: Student; // Los datos del estudiante que se rellenarán en el formulario.
  handleChange: (
    e: ChangeEvent<HTMLInputElement | HTMLSelectElement> // Manejador para cambios en inputs o selects.
  ) => void;
  handleSubmit: (e: FormEvent<HTMLFormElement>) => void; // Manejador para el envío del formulario.
}

update.student.form.props.ts #

Este archivo define la interfaz StudentFormProps, que especifica las propiedades (props) que el componente UpdateStudentForm (ubicado en src/components/common/forms/update-student/update.student.form.tsx) espera recibir.

• Descripción: StudentFormProps es una interfaz que garantiza el tipado fuerte para el objeto Student a editar y los manejadores de eventos (onChange, onSubmit, onDeleteFile) que se pasan al formulario de actualización. Su onChange es particularmente flexible para manejar diversos tipos de inputs y actualizaciones programáticas.
• Propósito: Asegurar que el componente UpdateStudentForm reciba los tipos de datos y funciones correctos de su componente padre (típicamente una página o un hook que gestiona el estado del formulario de edición). Esto mejora la seguridad de tipos, facilita el desarrollo y el mantenimiento del formulario de actualización.
• Funcionalidad clave:
  • student: Student;:
    • Define que el formulario recibirá un objeto Student. Este objeto contiene los datos actuales del estudiante a ser visualizados y editados.
    • La interfaz Student se importa de ./student.ts, asegurando la coherencia con la estructura general de los datos del estudiante.
  • onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | { name: keyof Student; value: File | null }) => void;:
    • Define la firma para la función que manejará los cambios en los campos del formulario.
    • Es una función altamente flexible que acepta dos tipos de eventos:
      • Un evento de cambio estándar de React (React.ChangeEvent) para HTMLInputElement, HTMLSelectElement o HTMLTextAreaElement.
      • Un objeto para actualizaciones programáticas ({ name: keyof Student; value: File | null }), utilizado para casos especiales como la eliminación de archivos (estableciendo su valor a null).
  • onSubmit: (e: React.FormEvent) => void;:
    • Define la firma para la función que manejará el envío del formulario.
    • Acepta un evento de formulario estándar de React (React.FormEvent).
  • onDeleteFile: (fieldName: keyof Student) => void;:
    • Define la firma para una función callback para notificar al componente padre que se ha solicitado la eliminación de un archivo específico de un campo del estudiante.
• Rol en la aplicación: update.student.form.props.ts es fundamental para el contrato de interfaz entre el componente UpdateStudentForm y su componente padre. Es una pieza clave en la arquitectura de formularios basados en props, garantizando que los datos y las acciones fluyan de forma predecible y tipada.

// src/interface/student/update.student.form.props.ts

// Importa 'Student' como tipo para evitar problemas de compilación si no se usa como valor en tiempo de ejecución.
import type { Student } from "./student";
// Importa los tipos específicos de eventos de React que se utilizan en las firmas de las funciones.
import type { ChangeEvent, FormEvent } from 'react';


/**
 * Interfaz que define las propiedades esperadas por el componente `UpdateStudentForm`.
 */
export interface StudentFormProps {
  student: Student; // Los datos del estudiante a editar en el formulario.
  onChange: (
    e:
      | ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> // Manejador para cambios en inputs, selects o textareas.
      | { name: keyof Student; value: File | null } // O un objeto para actualizaciones programáticas (ej. eliminar archivo).
  ) => void;
  onSubmit: (e: FormEvent<HTMLFormElement>) => void; // Manejador para el envío del formulario.
  onDeleteFile: (fieldName: keyof Student) => void; // Manejador para eliminar un archivo específico del estudiante.
}

grid.props.ts #

Este archivo define la interfaz GridProps, que especifica las propiedades (props) que el componente Grid (ubicado en src/components/common/grid/grid.tsx) espera recibir. Esta interfaz permite configurar de manera flexible el comportamiento y la apariencia de un layout basado en CSS Grid.

• Descripción: GridProps es una interfaz consolidada que define todas las propiedades que el componente Grid puede aceptar. Incluye la capacidad de recibir elementos hijos, controlar la alineación, el espaciado (gap), la configuración de filas y columnas (ahora como un número para columnas dinámicas), y todos los atributos HTML estándar de un elemento div gracias a la extensión de HTMLAttributes<HTMLDivElement>.
• Propósito: Asegurar que el componente Grid reciba los tipos de datos y configuraciones correctos de sus componentes padre. Esto mejora la seguridad de tipos, facilita el desarrollo y el mantenimiento de los layouts de cuadrícula reutilizables, y resuelve los conflictos de tipado causados por definiciones duplicadas de GridProps.
• Contexto de la Modificación (Resolución de Conflictos): Originalmente, existían dos definiciones de GridProps en la misma carpeta (src/interface/common/grid/), una en grid.props.ts y otra en grid.ts, con ligeras diferencias. Esta interfaz consolidada fusiona ambas definiciones en una única y completa GridProps, eliminando la duplicación y resolviendo los errores de tipado asociados. El archivo src/interface/common/grid/grid.ts fue eliminado como parte de esta refactorización.
• Funcionalidad Clave de las Propiedades:
  • children: ReactNode;: Define que el componente Grid aceptará cualquier elemento o componente de React como sus hijos, los cuales serán renderizados dentro de la cuadrícula.
  • Extiende HTMLAttributes<HTMLDivElement>: Esta extensión es crucial. Permite que el componente Grid acepte cualquier atributo HTML válido para un elemento div (ej., id, style, onClick, tabIndex, etc.) y que estos se propaguen automáticamente. Esto elimina la necesidad de declarar individualmente muchos atributos estándar.
  • justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";:
    • Propiedad opcional para la alineación horizontal de los ítems de la cuadrícula o flexbox.
  • alignItems?: "flex-start" | "center" | "flex-end" | "stretch";:
    • Propiedad opcional para la alineación vertical de los ítems de la cuadrícula o flexbox.
  • gap?: string;:
    • Propiedad opcional para definir el espacio (gutter) entre las filas y columnas de la cuadrícula (ej., "16px", "1rem").
  • rows?: string;:
    • Propiedad opcional para definir las plantillas de filas de la cuadrícula (grid-template-rows en CSS). Se espera una cadena CSS válida (ej., "1fr 1fr").
  • columns?: number;:
    • Tipo Corregido: Esta propiedad ahora es de tipo number. Se utiliza en el componente Grid.tsx para generar clases CSS dinámicas como "grid-columns-2", "grid-columns-3", etc., lo que permite controlar el número de columnas de forma responsiva a través de SCSS.
    • (La propiedad className se hereda de HTMLAttributes<HTMLDivElement> y no necesita ser declarada aquí).
• Rol en la Aplicación: grid.props.ts es fundamental para el contrato de interfaz del componente Grid. Garantiza que el Grid reciba las configuraciones de layout esperadas y se comporte de forma predecible en toda la aplicación, siendo una base sólida para la creación de layouts complejos y responsivos.

// src/interface/common/grid/grid.props.ts
// Este archivo contiene la interfaz consolidada para las propiedades del componente Grid.

// Importa los tipos ReactNode (para el children) y HTMLAttributes (para atributos HTML estándar)
import type { ReactNode, HTMLAttributes } from "react"; 

/**
 * Interfaz que define todas las propiedades esperadas por el componente `Grid`.
 * Extiende `HTMLAttributes<HTMLDivElement>` para incluir atributos HTML estándar de un div.
 */
export default interface GridProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode; // Contenido a renderizar dentro de la cuadrícula (cualquier elemento React).

  // Propiedades de alineación para la disposición de ítems dentro de la cuadrícula o flexbox.
  justifyContent?:
    | "flex-start"
    | "center"
    | "flex-end"
    | "space-between"
    | "space-around";
  alignItems?: "flex-start" | "center" | "flex-end" | "stretch";

  gap?: string; // Define el espacio (gutter) entre las filas y columnas de la cuadrícula (ej., "16px", "1rem").
  rows?: string; // Define las plantillas de filas CSS para la cuadrícula (ej., "1fr 1fr", "auto max-content").

  // Propiedad 'columns': Define el número de columnas para el componente Grid.
  // Es de tipo 'number' para generar clases CSS dinámicas como 'grid-columns-2'.
  columns?: number;

  // Nota: La propiedad 'className' y otras propiedades HTML comunes ya están incluidas
  // al extender 'HTMLAttributes<HTMLDivElement>', por lo que no necesitan ser declaradas aquí.
}

input.field.ts #

Este archivo define la interfaz FormInputProps, la cual especifica las propiedades que el componente FormInput (ubicado en src/components/common/forms/form.input.tsx) espera recibir. Esta interfaz es crucial para la flexibilidad y el tipado estricto de tus campos de formulario reutilizables.

• Descripción: FormInputProps es una interfaz que garantiza el tipado fuerte para un amplio rango de propiedades de campos de entrada, abarcando desde inputs de texto básicos hasta selectores y campos de tipo archivo. Define el tipo de valor que puede recibir el input, el manejador de cambios, y otros atributos HTML relevantes.
• Propósito: Asegurar que el componente FormInput reciba los tipos de datos y configuraciones correctos de sus componentes padre (como AddStudentForm o LoginForm). Esto mejora la seguridad de tipos, facilita el desarrollo y el mantenimiento de los formularios, y promueve la reutilización del componente FormInput.
• Funcionalidad Clave de las Propiedades:
  • id?: string;: Identificador único para el campo, útil para asociar con la etiqueta (<label>) y para el DOM. Es opcional.
  • name: string;: El nombre del campo. Es fundamental para el manejo de formularios HTML y para identificar el campo en los datos del formulario (ej., FormData). Es obligatorio.
  • label: string;: El texto visible de la etiqueta asociada al campo. Es obligatorio.
  • type: string;: El tipo del input HTML (ej., "text", "email", "password", "date", "file", "select"). Es obligatorio.
  • value?: string | number | readonly string[] | File | Date | undefined;: El valor actual del campo. Es opcional (?) y muy flexible, permitiendo varios tipos de datos que pueden provenir de un objeto Student (cadenas, números, archivos, fechas) o undefined si no hay valor. Se ha excluido null directamente de la interfaz, ya que el componente FormInput se encarga de convertir null a una cadena vacía internamente para React.
  • onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;: La función que manejará los cambios en el campo. Es obligatoria. Su firma es flexible para aceptar eventos de cambio tanto de inputs de texto (HTMLInputElement) como de selectores (HTMLSelectElement), lo cual es clave para la versatilidad de FormInput.
  • required?: boolean;: Indica si el campo es obligatorio en el formulario. Es opcional.
  • placeholder?: string;: Texto de marcador de posición para campos de entrada de texto. Es opcional.
  • className?: string;: Una clase CSS opcional para aplicar al div contenedor del campo, permitiendo estilos específicos.
  • options?: string[];: Un array de cadenas que proporciona las opciones para un campo de tipo "select". Es opcional.
  • accept?: string;: Para inputs de type="file", especifica qué tipos de archivos se aceptan (ej., "image/*"). Es opcional.
  • autocomplete?: string;: El atributo autocomplete de HTML, que ayuda a los navegadores a sugerir valores guardados para el campo. Es opcional.
• Rol en la aplicación: input.field.ts es fundamental para el contrato de interfaz del componente FormInput. Garantiza que todos los campos de formulario en tu aplicación sigan una estructura y un comportamiento predecibles, mejorando la seguridad de tipos y la coherencia del desarrollo de formularios.

// src/interface/common/input.field.ts

/**
 * Interfaz que define las propiedades esperadas por el componente `FormInput`.
 * Permite configurar un campo de formulario de manera flexible para diversos tipos de input.
 */
interface FormInputProps {
  id?: string; // ID único del campo. Opcional.
  name: string; // Nombre del campo (crucial para HTML y manejo de estado). Obligatorio.
  label: string; // Etiqueta visible del campo. Obligatorio.
  type: string; // Tipo del input HTML (ej., "text", "select", "file"). Obligatorio.

  // Valor del input. Flexible para distintos tipos de datos. No incluye `null` directamente en la interfaz,
  // ya que el componente se encarga de convertir `null` a `""` internamente.
  value?: string | number | readonly string[] | File | Date | undefined;

  // Manejador de cambio para inputs y selects.
  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;

  // Propiedades opcionales para configurar el input/select.
  required?: boolean; // Indica si el campo es obligatorio.
  placeholder?: string; // Texto de marcador de posición.
  className?: string; // Clase CSS para el div contenedor.
  options?: string[]; // Array de opciones para inputs de tipo "select".
  accept?: string; // Atributo 'accept' para inputs de tipo "file".
  autocomplete?: string; // Atributo HTML 'autocomplete'.
}

export default FormInputProps;

statistics.ts #

Este archivo define un conjunto integral de interfaces relacionadas con la gestión de estadísticas y el filtrado de estudiantes en la aplicación. Actúa como un hub para los contratos de datos utilizados en la página de estadísticas y componentes relacionados.

• Descripción: statistics.ts exporta varias interfaces de propiedades para componentes de filtro (StudentFiltersProps, SourceFilterProps, SchoolFilterProps, CourseFilterProps, StatisticsFiltersProps), la interfaz principal para los resultados de los cálculos estadísticos (FilteredStatistics), y propiedades para componentes de visualización de datos (BarChartProps, PieChartProps, TableProps, StudentTableProps). Ahora, los enums base como Source, School y Course se importan desde una ubicación centralizada (src/interface/common/enums.ts).
• Propósito: Proporcionar una definición de tipos robusta y centralizada para los datos y propiedades que circulan por la funcionalidad de estadísticas. Esto asegura que la información se pase y se procese de manera consistente, mejorando la seguridad de tipos y la mantenibilidad de la página de estadísticas.
• Funcionalidad clave (Interfaces):
  • Importaciones de Tipos Base (Student, Source, School, Course):
    • Student se importa de ../../student/student.ts.
    • Source, School, Course se importan ahora desde ../common/enums, su nueva ubicación centralizada. Esto es crucial para la consistencia global de estos enums en toda la aplicación.
  • export interface StudentFiltersProps: Define las propiedades para el orquestador principal de filtros de estudiantes (StudentFilters), incluyendo la lista de students y los filtros opcionales de source, school y course.
  • export interface SourceFilterProps, export interface SchoolFilterProps, export interface CourseFilterProps:
    • Interfaces más específicas para las funciones de filtrado individuales por Source, School y Course.
  • export interface StatisticsFiltersProps:
    • Define las propiedades de entrada para la función calculateStatistics, que incluye la lista de students y los filtros opcionales de source, school y course.
  • export interface FilteredStatistics:
    • Esta es la interfaz clave de salida para los cálculos estadísticos. Define la estructura de todos los conteos y agrupaciones que calculateStatistics produce y que son consumidos por los componentes de visualización. Incluye:
      • Conteo por fuentes de inscripción (socialMediaCount, captadorCount, noRegisteredSource).
      • Conteo por preferencias de comunicación (whatsappCount, phoneCount, noRegisteredCommunication).
      • Listas agrupadas por captador, colegio, colegio/curso y feedback (contactsByPerson, studentsBySchool, studentsByCollegeCourse, studentsBySchoolCourseFeedback).
      • Conteos demográficos (genderCount).
      • Conteos de estado general (studentsByGeneralState).
      • Conteos especiales (studentsWithoutSchoolAndCourse).
  • Interfaces de Propiedades de Gráficos/Tablas:
    • export interface BarChartProps: Para gráficos de barras.
    • export interface PieChartProps: Para gráficos circulares.
    • export interface TableProps: Para componentes de tabla genéricos.
  • export interface StudentTableProps:
    • Define las propiedades para el componente StudentTable. Espera un array de Student[], junto con el title y viewProfilePath.
• Rol en la aplicación: statistics.ts es el diccionario de datos para toda la funcionalidad de estadísticas. Asegura que todos los datos y props relacionados con filtros y visualizaciones estadísticas sean coherentes y estén fuertemente tipados, lo cual es vital para la fiabilidad de la página de estadísticas.

// src/interface/common/statistics.ts

// Importa la interfaz Student.
import type { Student } from "../../student/student";
// Importa los enums de categorías desde su nueva ubicación centralizada.
import type { Source, School, Course } from "./enums"; 

/**
 * Interfaz para las propiedades del componente `StudentFilters` (orquestador de filtros).
 */
export interface StudentFiltersProps {
  students: Student[]; // Array de estudiantes a los que se aplicarán los filtros.
  sourceFilter: Source | null; // Criterio opcional para filtrar por fuente.
  schoolFilter: School | null; // Criterio opcional para filtrar por colegio.
  courseFilter: Course | null; // Criterio opcional para filtrar por curso.
}

/**
 * Interfaz para las propiedades de la función de filtro por fuente.
 */
export interface SourceFilterProps {
  students: Student[]; // Array de estudiantes a filtrar.
  source: Source;      // Valor específico de la fuente para filtrar.
}

/**
 * Interfaz para las propiedades de la función de filtro por colegio.
 */
export interface SchoolFilterProps {
  students: Student[]; // Array de estudiantes a filtrar.
  school: School;      // Valor específico del colegio para filtrar.
}

/**
 * Interfaz para las propiedades de la función de filtro por curso.
 */
export interface CourseFilterProps {
  students: Student[]; // Array de estudiantes a filtrar.
  course: Course;      // Valor específico del curso para filtrar.
}

/**
 * Interfaz para las propiedades de entrada de la función `calculateStatistics`.
 */
export interface StatisticsFiltersProps {
  students: Student[]; // Array de estudiantes a partir del cual se calcularán las estadísticas.
  source: Source | null; // Criterio opcional para filtrar antes de calcular.
  school: School | null; // Criterio opcional para filtrar antes de calcular.
  course: Course | null; // Criterio opcional para filtrar antes de calcular.
}

/**
 * Interfaz que define la estructura de los resultados calculados por la función `calculateStatistics`.
 * Contiene todos los conteos y agrupaciones para las visualizaciones.
 */
export interface FilteredStatistics {
  socialMediaCount: number; // Conteo de estudiantes por redes sociales.
  captadorCount: number; // Conteo de estudiantes por captador.
  noRegisteredSource: number; // Conteo de estudiantes sin fuente registrada.
  whatsappCount: number; // Conteo de estudiantes con preferencia WhatsApp.
  phoneCount: number; // Conteo de estudiantes con preferencia Teléfono.
  noRegisteredCommunication: number; // Conteo de estudiantes sin preferencia de comunicación registrada.
  contactsByPerson: { Captador: string; Contacto: number }[]; // Lista de contactos por persona/captador.
  studentsBySchool: { school: string; students: number }[]; // Conteo de estudiantes por colegio.
  studentsByCollegeCourse: { [school: string]: { [course: string]: number } }; // Conteo anidado por colegio y curso.
  studentsBySchoolCourseFeedback: {
    Escuela: string;
    Curso: string;
    feedback: string;
    Estudiantes: number;
  }[]; // Conteo detallado por escuela, curso y feedback.
  genderCount: {
    hombres: number;
    mujeres: number;
    otros: number;
    noContesta: number;
  }; // Conteo de estudiantes por género.
  studentsByGeneralState: { estado: string; cantidad: number }[]; // Conteo de estudiantes por estado general.
  studentsWithoutSchoolAndCourse: number; // Conteo de estudiantes sin asignación de colegio/curso.
}

/**
 * Interfaz para las propiedades del componente `BarChart`.
 */
export interface BarChartProps {
  data: { name: string; value: number }[]; // Datos para el gráfico (nombre de categoría y valor).
  title: string; // Título del gráfico.
}

/**
 * Interfaz para las propiedades del componente `PieChart`.
 */
export interface PieChartProps {
  data: { name: string; value: number }[]; // Datos para el gráfico circular.
  title: string; // Título del gráfico.
}

/**
 * Interfaz para las propiedades del componente `Table`.
 */
export interface TableProps {
  data: Record<string, any>[]; // Array de objetos que representan las filas de la tabla.
  columns: string[]; // Array de nombres de columnas.
}

/**
 * Interfaz para las propiedades del componente `StudentTable`.
 */
export interface StudentTableProps {
  students: Student[]; // Array de estudiantes a mostrar en la tabla.
  title: string; // Título de la tabla.
  viewProfilePath: string; // Ruta base para ver el perfil de un estudiante.
}

<## enums.ts

Este archivo es un repositorio centralizado para todos los enums utilizados en la aplicación. Define categorías fijas de datos que se usan de forma consistente en múltiples interfaces y componentes, como el sexo, la fuente de contacto, la preferencia de comunicación, y los detalles de escuelas y cursos.

• Descripción: enums.ts exporta varios enums que representan conjuntos de valores constantes. Estos enums son utilizados en interfaces (como Student) y en la lógica de componentes para asegurar que las opciones de selección y categorización de datos sean uniformes en toda la aplicación.
• Propósito: Centralizar las definiciones de enums para mejorar la consistencia, la mantenibilidad y la legibilidad del código. Si un valor de enum necesita ser cambiado o añadido, solo se hace en un único lugar, y ese cambio se propagará a todos los sitios donde se use el enum.
• Funcionalidad Clave:
  • export enum Sex: Define las opciones de género para los estudiantes ("MASCULINO", "FEMENINO", "OTROS").
  • export enum Source: Define las posibles fuentes de contacto o inscripción de los estudiantes ("REDES SOCIALES", "CAPTADOR").
  • export enum CommunicationPreference: Define las preferencias de comunicación preferidas ("WHATSAPP", "TELÉFONO").
  • export enum School: Define los diferentes colegios disponibles. Sus valores son cadenas de texto que corresponden a los nombres completos de los colegios.
  • export enum Course: Define los diferentes cursos o niveles académicos. Sus valores son cadenas de texto que corresponden a los nombres completos de los cursos.
• Rol en la Aplicación: enums.ts actúa como un diccionario de categorías fijas. Es fundamental para el tipado fuerte en TypeScript y para garantizar que los datos se clasifiquen y se muestren de manera uniforme en toda la aplicación, desde los formularios hasta las visualizaciones de estadísticas.

// src/interface/common/enums.ts

export enum Sex {
  Male = "MASCULINO",
  Female = "FEMENINO",
  Other = "OTROS",
}

export enum Source {
  SocialMedia = "REDES SOCIALES",
  InPerson = "CAPTADOR",
}

export enum CommunicationPreference {
  Whatsapp = "WHATSAPP",
  Phone = "TELÉFONO",
}

export enum School {
  Quinta = "QUINTA NORMAL",
  Buin = "BUÍN",
  Granja = "LA GRANJA",
  Nunoa = "ÑUÑOA",
  Pudahuel = "PUDAHUEL", 
  Miguel = "SAN MIGUEL",
}

export enum Course {
  NB1 = "1° NIVEL BÁSICO",
  NB2 = "2° NIVEL BÁSICO",
  NB3 = "3° NIVEL BÁSICO",
  NM1 = "1° NIVEL MEDIO",
  NM2 = "2° NIVEL MEDIO",
}>

auth.context.type.ts #

Este archivo define la interfaz AuthContextType, que especifica la estructura y el contenido del objeto de contexto que el AuthProvider (ubicado en src/components/auth/auth.context.tsx) proporcionará a toda la aplicación.

• Descripción: AuthContextType es una interfaz que garantiza el tipado fuerte para el estado de autenticación (token, ID de usuario, email, estado de autenticación, estado de carga, errores) y las funciones (login, logout) que están disponibles globalmente a través del contexto de autenticación de React. Implementa un estado de carga inicial (isInitialLoading) para la validación del token al cargar la aplicación.
• Propósito: Asegurar que cualquier componente que consuma el AuthContext (a través del hook useAuth) reciba un objeto con las propiedades y funciones esperadas y correctamente tipadas. Esto es fundamental para la seguridad de tipos y para la predictibilidad del comportamiento del sistema de autenticación.
• Funcionalidad Clave de las Propiedades:
  • token: string | null;: La cadena del token JWT actual del usuario autenticado, o null si no hay sesión.
  • userId: string | null;: El ID único del usuario, extraído del token JWT decodificado, o null.
  • email: string | null;: El correo electrónico del usuario, extraído del token JWT decodificado, o null.
  • login: (token: string) => Promise<void>;: (Modificado) La función que permite a la aplicación iniciar la sesión de un usuario (procesar y almacenar un nuevo token). Se tipa como Promise<void> porque es una operación asíncrona.
  • logout: () => void;: La función que permite a la aplicación cerrar la sesión del usuario (limpiar el token).
  • isAuthenticated: boolean;: Un booleano que indica si el usuario está actualmente autenticado (true) o no (false).
  • isLoading: boolean;: Un booleano que indica si el sistema de autenticación está realizando alguna operación de carga (ej., verificación inicial del token, proceso de login), lo que puede usarse para mostrar un spinner.
  • loginError: string | null;: Un mensaje de error específico relacionado con el proceso de inicio de sesión o la validación del token, o null si no hay error.
• Rol en la Aplicación: auth.context.type.ts es fundamental para el contrato de interfaz del contexto de autenticación. Es la "API" tipada que define cómo los componentes interactuarán con el estado global de la sesión, garantizando que el flujo de datos sea claro y seguro.

// src/interface/auth/auth.context.type.ts

/**
 * Interfaz que define la estructura del objeto de contexto de autenticación.
 * Este objeto es proporcionado por el AuthProvider y consumido por el hook useAuth.
 */
export default interface AuthContextType {
  token: string | null; // Token de autenticación JWT (string) o null si no hay sesión.
  userId: string | null; // ID del usuario autenticado (string) o null.
  email: string | null; // Correo electrónico del usuario autenticado (string) o null.
  // La función login se tipa como Promise<void> porque es asíncrona.
  login: (token: string) => Promise<void>; // Función para iniciar sesión, recibe un token JWT y devuelve una Promesa.
  logout: () => void; // Función para cerrar sesión.
  isAuthenticated: boolean; // True si el usuario está autenticado, false en caso contrario.
  isLoading: boolean; // True si el sistema de autenticación está cargando (ej. validación de token inicial, login).
  loginError: string | null; // Mensaje de error si el login falla, o null.
}

auth.provider.props.ts #

Este archivo define la interfaz AuthProviderProps, que especifica las propiedades (props) que el componente AuthProvider (ubicado en src/components/auth/auth.context.tsx) espera recibir.

• Descripción: AuthProviderProps es una interfaz sencilla que simplemente indica que el AuthProvider es un componente envoltorio que recibirá elementos hijos de React para renderizar dentro de su contexto.
• Propósito: Proporcionar un tipado claro para los children que se pasarán al AuthProvider. Esto asegura que el AuthProvider pueda renderizar correctamente el árbol de componentes anidados a los que proporcionará el contexto de autenticación.
• Funcionalidad Clave de las Propiedades:
  • children: React.ReactNode;:
    • Esta propiedad es el estándar de React para representar los elementos hijos que se le pasan a un componente. React.ReactNode puede ser cualquier cosa que React pueda renderizar (elementos JSX, cadenas, números, fragmentos, etc.).
• Rol en la Aplicación: auth.provider.props.ts es fundamental para el contrato de interfaz del AuthProvider. Asegura que el AuthProvider sea utilizado correctamente como un componente envoltorio en el árbol de componentes de React.

// src/interface/auth/auth.provider.props.ts

// Importa el tipo ReactNode explícitamente desde 'react' para tipado.
import type { ReactNode } from "react";

/**
 * Interfaz que define las propiedades esperadas por el componente `AuthProvider`.
 * Un componente proveedor típicamente solo espera recibir elementos hijos.
 */
export default interface AuthProviderProps {
  children: ReactNode; // Los elementos hijos que serán envueltos por el AuthProvider.
}

auth.ts #

Este archivo define las interfaces para las respuestas de autenticación que se esperan del backend cuando un usuario intenta iniciar sesión o verificar su estado.

• Descripción: auth.ts exporta tres interfaces clave: AuthResponse para una autenticación exitosa (incluyendo datos del usuario y tokens), AuthResponseError para respuestas de error, y User para la estructura básica de los datos de un usuario.
• Propósito: Proporcionar un tipado estricto para los datos que se reciben de la API de autenticación. Esto asegura que el frontend pueda procesar las respuestas del backend de manera predecible, gestionar el estado de la sesión y manejar los errores de forma segura.
• Funcionalidad Clave (Interfaces):
  • export interface AuthResponse:
    • Define la estructura de una respuesta exitosa de autenticación.
    • body: Contiene el objeto principal de la respuesta.
      • user: User;: Los datos del usuario autenticado, tipados por la interfaz User.
      • accessToken: string;: El token de acceso JWT, utilizado para autenticar futuras peticiones protegidas.
      • refreshToken: string;: (Nota: typo aquí, debería ser refreshToken) El token de refresco, utilizado para obtener nuevos tokens de acceso sin que el usuario tenga que iniciar sesión de nuevo.
  • export interface AuthResponseError:
    • Define la estructura de una respuesta de error de autenticación.
    • body: Contiene el objeto del error.
      • error: string;: Un mensaje descriptivo del error.
  • export interface User:
    • Define la estructura de los datos básicos de un usuario.
    • _id: string;: El identificador único del usuario en la base de datos.
    • name: string;: El nombre del usuario.
    • username: string;: El nombre de usuario.
• Rol en la Aplicación: auth.ts es fundamental para el contrato de interfaz con la API de autenticación. Permite que funciones utilitarias (como authenticateUser en src/utils/auth.utils.ts) y hooks (como useLogin en src/hooks/use.login.ts) trabajen con respuestas de la API de manera tipada y segura, facilitando la extracción de datos y el manejo de errores.

// src/interface/auth/auth.ts

/**
 * Interfaz para una respuesta exitosa de autenticación desde la API.
 */
export interface AuthResponse {
  body: {
    user: User; // Los datos del usuario autenticado
    accessToken: string; // El token de acceso JWT
    refresToken: string; // Nota: Hay un typo aquí, debería ser 'refreshToken'
  };
}

/**
 * Interfaz para una respuesta de error de autenticación desde la API.
 */
export interface AuthResponseError {
  body: {
    error: string; // Mensaje de error
  };
}

/**
 * Interfaz para los datos básicos de un usuario.
 */
export interface User {
  _id: string; // ID único del usuario
  name: string; // Nombre del usuario
  username: string; // Nombre de usuario
}

public.layouts.props.ts #

Este archivo define la interfaz PublicLayoutProps, que especifica las propiedades (props) que el componente PublicLayout (ubicado en src/components/layouts/public-layout/public.layout.tsx) espera recibir.

• Descripción: PublicLayoutProps es una interfaz sencilla que indica que el PublicLayout es un componente envoltorio que recibirá y renderizará elementos hijos de React.
• Propósito: Proporcionar un tipado claro para los children que se pasarán al PublicLayout. Esto asegura que el PublicLayout pueda renderizar correctamente el árbol de componentes anidados a los que proporcionará su estructura de layout.
• Funcionalidad Clave de las Propiedades:
  • children: React.ReactNode;:
    • Esta propiedad es el estándar de React para representar los elementos hijos que se le pasan a un componente. React.ReactNode puede ser cualquier cosa que React pueda renderizar (elementos JSX, cadenas, números, fragmentos, etc.).
• Rol en la Aplicación: public.layouts.props.ts es fundamental para el contrato de interfaz del PublicLayout. Asegura que el PublicLayout sea utilizado correctamente como un componente envoltorio en el árbol de componentes de React.

// src/interface/layouts/public.layouts.props.ts

// Importa el tipo ReactNode explícitamente desde 'react' para tipado.
import type { ReactNode } from "react";

/**
 * Interfaz que define las propiedades esperadas por el componente `PublicLayout`.
 * Un componente de layout público típicamente solo espera recibir elementos hijos.
 */
export default interface PublicLayoutProps {
  children: ReactNode; // Los elementos hijos que serán envueltos por el PublicLayout.
}

login.form.props.ts #

Este archivo define la interfaz LoginFormProps, la cual especifica las propiedades (props) que el componente LoginForm (ubicado en src/features/login/login.form.tsx) espera recibir.

• Descripción: LoginFormProps es una interfaz que garantiza el tipado fuerte para los manejadores de eventos de envío y el estado de carga del formulario de login. También incluye propiedades opcionales (emailProps, passwordProps) que, según el código actual de LoginForm, no se están utilizando directamente para pasar propiedades a los FormInput anidados.
• Propósito: Asegurar que el componente LoginForm reciba los tipos de datos y funciones correctos de su componente padre (Login). Esto mejora la seguridad de tipos, facilita el desarrollo y el mantenimiento del formulario de login.
• Funcionalidad Clave de las Propiedades:
  • onSubmit: (email: string, password: string) => void;:
    • Define la firma para la función que se ejecutará cuando el formulario se envíe.
    • Recibe el email y la password ingresados por el usuario. Es obligatoria.
  • isLoading: boolean;:
    • Un booleano que indica si el proceso de envío del formulario está en curso. Es obligatoria. Se usa para deshabilitar el botón de envío y mostrar un estado de carga.
• Rol en la Aplicación: login.form.props.ts es fundamental para el contrato de interfaz entre el componente LoginForm y su componente padre. Asegura que el formulario reciba los datos y las funciones de callback esperadas para su correcto funcionamiento.

// src/interface/login/login.form.props.ts

// Importa InputFieldProps para tipar las propiedades de los campos de email y contraseña.
import InputFieldProps from "../common/input-field/input.field";

/**
 * Interfaz que define las propiedades esperadas por el componente `LoginForm`.
 */
export default interface LoginFormProps {
  onSubmit: (email: string, password: string) => void; // Función que maneja el envío del formulario.
  isLoading: boolean; // Indica si el formulario está en proceso de envío.
}