academia/docs/architecture/diagrams/04-components.puml

@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
  <b>Regla de Dependencia:</b>
  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