@startuml components !theme plain skinparam componentStyle uml2 skinparam packageStyle rectangle skinparam componentBackgroundColor #F8F9FA skinparam componentBorderColor #495057 skinparam packageBackgroundColor #FFFFFF skinparam packageBorderColor #DEE2E6 title Sistema de Registro de Estudiantes - Arquitectura de Componentes package "Frontend (Angular 21)" as frontend { [App Component] as app package "Features" { package "Auth" { [Login Page] as loginPage [Register Page] as registerPage [Reset Password] as resetPage [Activate Account] as activatePage } package "Dashboard" { [Student Dashboard] as studentDash [Admin Dashboard] as adminDash } package "Students" { [Student List] as studentList [Student Form] as studentForm } package "Enrollment" { [Enrollment Page] as enrollPage [Classmates Page] as classmates } } package "Core" { [Apollo Client] as apollo [Auth Service] as authSvc [Student Service] as studentSvc [Enrollment Service] as enrollSvc [Connectivity Service] as connSvc [Error Handler] as errorHandler } package "Guards" { [Auth Guard] as authGuard [Admin Guard] as adminGuard [Guest Guard] as guestGuard } package "Shared" { [Connectivity Overlay] as overlay [Loading Spinner] as spinner [Confirm Dialog] as dialog } } package "Backend (.NET 10)" as backend { package "Host" as host { [Program.cs] as program [DI Container] as di } package "Adapters" as adapters { package "Driving (Primary)" { [GraphQL API\n(HotChocolate)] as graphql [Query] as query [Mutation] as mutation [Auth Types] as authTypes [Student Types] as studentTypes } package "Driven (Secondary)" { [Repositories] as repos [DataLoaders] as loaders [DbContext] as dbContext [JWT Service] as jwtSvc [Password Service] as passSvc } } package "Application" as application { package "Auth" { [Login Command] as loginCmd [Register Command] as registerCmd [Reset Password] as resetCmd } package "Students" { [Student Commands] as studentCmds [Student Queries] as studentQs } package "Enrollments" { [Enroll Commands] as enrollCmds [Classmates Query] as classmatesQ } [Validators] as validators [DTOs] as dtos } package "Domain" as domain { [User Entity] as userEntity [Student Entity] as studentEntity [Subject Entity] as subjectEntity [Enrollment Entity] as enrollEntity [Value Objects] as valueObjects [Domain Services] as domainSvc [Ports (Interfaces)] as ports } } database "SQL Server 2022" as sqlserver { [Users Table] as tblUsers [Students Table] as tblStudents [Subjects Table] as tblSubjects [Professors Table] as tblProf [Enrollments Table] as tblEnroll } cloud "Browser" as browser ' Conexiones Frontend browser --> app app --> loginPage app --> registerPage app --> studentDash app --> adminDash app --> studentList app --> enrollPage app --> overlay loginPage --> authSvc registerPage --> authSvc resetPage --> authSvc activatePage --> authSvc studentDash --> studentSvc adminDash --> studentSvc studentList --> studentSvc enrollPage --> enrollSvc classmates --> enrollSvc overlay --> connSvc authSvc --> apollo studentSvc --> apollo enrollSvc --> apollo ' Guards authGuard ..> authSvc adminGuard ..> authSvc guestGuard ..> authSvc ' Conexiones Backend apollo --> graphql : HTTP/GraphQL\n+ JWT Header graphql --> query graphql --> mutation graphql --> authTypes mutation --> loginCmd mutation --> registerCmd mutation --> resetCmd mutation --> studentCmds mutation --> enrollCmds query --> studentQs query --> classmatesQ loginCmd --> jwtSvc loginCmd --> passSvc registerCmd --> passSvc studentCmds --> domainSvc enrollCmds --> domainSvc domainSvc --> studentEntity domainSvc --> valueObjects repos --> dbContext loaders --> dbContext dbContext --> sqlserver ' Implementación de puertos repos ..|> ports : implements jwtSvc ..|> ports : implements note right of domain Regla de Dependencia: Domain no depende de capas externas end note note bottom of graphql Endpoints: - /graphql - /health Auth: JWT Bearer end note note right of jwtSvc HMAC-SHA256 Configurable expiration end note @enduml