spr migrated books, and tester
This commit is contained in:
buenosairesam
184
atlas/book/arch-model/02-frontend-architecture.dot
Normal file
184
atlas/book/arch-model/02-frontend-architecture.dot
Normal file
@@ -0,0 +1,184 @@
|
||||
digraph FrontendArchitecture {
|
||||
// Graph settings
|
||||
rankdir=TB
|
||||
compound=true
|
||||
splines=ortho
|
||||
node [shape=box, style="rounded,filled", fontname="Helvetica", fontsize=11]
|
||||
edge [fontname="Helvetica", fontsize=9]
|
||||
|
||||
label="AMAR Mascotas - Frontend Architecture (Next.js)\n\n"
|
||||
labelloc="t"
|
||||
fontsize=16
|
||||
fontname="Helvetica-Bold"
|
||||
|
||||
// Next.js Core Cluster
|
||||
subgraph cluster_nextjs {
|
||||
label="Next.js 13+ (App Router)"
|
||||
style="rounded,filled"
|
||||
fillcolor="#E3F2FD"
|
||||
color="#1565C0"
|
||||
|
||||
app_router [label="App Router\n/app/*", fillcolor="#BBDEFB"]
|
||||
layout [label="Layout Components\n(RootLayout, etc)", fillcolor="#BBDEFB"]
|
||||
middleware [label="Middleware\n(Auth redirect)", fillcolor="#BBDEFB"]
|
||||
}
|
||||
|
||||
// Public Frontend Cluster
|
||||
subgraph cluster_public {
|
||||
label="Public Frontend (/(frontend))"
|
||||
style="rounded,filled"
|
||||
fillcolor="#E8F5E9"
|
||||
color="#2E7D32"
|
||||
|
||||
home [label="Home Page\n/", fillcolor="#C8E6C9"]
|
||||
services_page [label="Services Catalog\n/servicios", fillcolor="#C8E6C9"]
|
||||
cart_page [label="Cart\n/carrito", fillcolor="#C8E6C9"]
|
||||
login_page [label="Login/Register\n/login", fillcolor="#C8E6C9"]
|
||||
profile_page [label="User Profile\n/perfil", fillcolor="#C8E6C9"]
|
||||
pets_page [label="My Pets\n/mascotas", fillcolor="#C8E6C9"]
|
||||
requests_page [label="My Requests\n/solicitudes", fillcolor="#C8E6C9"]
|
||||
}
|
||||
|
||||
// Backoffice Cluster
|
||||
subgraph cluster_backoffice {
|
||||
label="Backoffice (/(backoffice)/admin)"
|
||||
style="rounded,filled"
|
||||
fillcolor="#FFF3E0"
|
||||
color="#E65100"
|
||||
|
||||
admin_dash [label="Dashboard\n/admin", fillcolor="#FFE0B2"]
|
||||
admin_visits [label="Visits Management\n/admin/visits", fillcolor="#FFE0B2"]
|
||||
admin_pets [label="Pets Overview\n/admin/pets", fillcolor="#FFE0B2"]
|
||||
admin_requests [label="Service Requests\n/admin/solicitudes", fillcolor="#FFE0B2"]
|
||||
admin_calendar [label="Calendar View\n/admin/calendario", fillcolor="#FFE0B2"]
|
||||
}
|
||||
|
||||
// Components Cluster
|
||||
subgraph cluster_components {
|
||||
label="Shared Components (/components)"
|
||||
style="rounded,filled"
|
||||
fillcolor="#F3E5F5"
|
||||
color="#7B1FA2"
|
||||
|
||||
sidebar [label="Sidebar\nNavigation", fillcolor="#E1BEE7"]
|
||||
navbar [label="NavbarBackoffice\nTop Bar", fillcolor="#E1BEE7"]
|
||||
visits_section [label="VisitsSection\n(List + Actions)", fillcolor="#E1BEE7"]
|
||||
drawer [label="VisitsDrawer\n(Side Panel)", fillcolor="#E1BEE7"]
|
||||
tables [label="DataTable\nComponents", fillcolor="#E1BEE7"]
|
||||
forms [label="Form Components\n(Pet, Visit, etc)", fillcolor="#E1BEE7"]
|
||||
}
|
||||
|
||||
// Services Layer Cluster
|
||||
subgraph cluster_services {
|
||||
label="Services Layer (/services)"
|
||||
style="rounded,filled"
|
||||
fillcolor="#FFEBEE"
|
||||
color="#C62828"
|
||||
|
||||
http_service [label="HttpService\n(Axios wrapper)", fillcolor="#FFCDD2"]
|
||||
auth_api [label="authAPI\n(login/register)", fillcolor="#FFCDD2"]
|
||||
visits_api [label="visitsAPI\n(CRUD visits)", fillcolor="#FFCDD2"]
|
||||
orders_api [label="OrdersAPI\n(service requests)", fillcolor="#FFCDD2"]
|
||||
petowners_api [label="petOwnersAPI\n(clients)", fillcolor="#FFCDD2"]
|
||||
vets_api [label="VeterinariansAPI\n(professionals)", fillcolor="#FFCDD2"]
|
||||
services_api [label="servicesAPI\n(catalog)", fillcolor="#FFCDD2"]
|
||||
cart_api [label="CartAPI\n(shopping)", fillcolor="#FFCDD2"]
|
||||
}
|
||||
|
||||
// State Management Cluster
|
||||
subgraph cluster_state {
|
||||
label="State Management (/redux, /contexts)"
|
||||
style="rounded,filled"
|
||||
fillcolor="#E0F7FA"
|
||||
color="#00838F"
|
||||
|
||||
redux_store [label="Redux Store\n(Global State)", fillcolor="#B2EBF2"]
|
||||
auth_slice [label="Auth Slice\n(user, token)", fillcolor="#B2EBF2"]
|
||||
visits_slice [label="Visits Slice\n(visit data)", fillcolor="#B2EBF2"]
|
||||
cart_slice [label="Cart Slice\n(items)", fillcolor="#B2EBF2"]
|
||||
auth_context [label="AuthContext\n(Provider)", fillcolor="#B2EBF2"]
|
||||
}
|
||||
|
||||
// Backend API Cluster (external)
|
||||
subgraph cluster_backend {
|
||||
label="Django Backend API"
|
||||
style="rounded,filled"
|
||||
fillcolor="#ECEFF1"
|
||||
color="#455A64"
|
||||
|
||||
api_mascotas [label="/mascotas/api/v1/\n(Pets, Vets, Visits)", fillcolor="#CFD8DC"]
|
||||
api_productos [label="/productos/\n(Services, Prices)", fillcolor="#CFD8DC"]
|
||||
api_solicitudes [label="/solicitudes/\n(Requests)", fillcolor="#CFD8DC"]
|
||||
api_auth [label="/api/token/\n(JWT Auth)", fillcolor="#CFD8DC"]
|
||||
api_payments [label="/payments/\n(MercadoPago)", fillcolor="#CFD8DC"]
|
||||
}
|
||||
|
||||
// User Types
|
||||
subgraph cluster_users {
|
||||
label="User Types"
|
||||
style="rounded,filled"
|
||||
fillcolor="#FCE4EC"
|
||||
color="#AD1457"
|
||||
|
||||
petowner_user [label="PetOwner\n(Cliente)", shape=ellipse, fillcolor="#F8BBD9"]
|
||||
vet_user [label="Veterinarian\n(Profesional)", shape=ellipse, fillcolor="#F8BBD9"]
|
||||
admin_user [label="Admin/Staff\n(Interno)", shape=ellipse, fillcolor="#F8BBD9"]
|
||||
}
|
||||
|
||||
// Relationships - Router
|
||||
app_router -> layout [color="#1565C0"]
|
||||
app_router -> middleware [color="#1565C0"]
|
||||
|
||||
// Public pages
|
||||
home -> services_page [color="#2E7D32"]
|
||||
services_page -> cart_page [color="#2E7D32"]
|
||||
cart_page -> login_page [label="if not auth", color="#2E7D32", style=dashed]
|
||||
login_page -> profile_page [color="#2E7D32"]
|
||||
profile_page -> pets_page [color="#2E7D32"]
|
||||
profile_page -> requests_page [color="#2E7D32"]
|
||||
|
||||
// Backoffice pages
|
||||
admin_dash -> admin_visits [color="#E65100"]
|
||||
admin_dash -> admin_pets [color="#E65100"]
|
||||
admin_dash -> admin_requests [color="#E65100"]
|
||||
admin_dash -> admin_calendar [color="#E65100"]
|
||||
|
||||
// Components used by pages
|
||||
admin_visits -> visits_section [color="#7B1FA2", style=dashed]
|
||||
admin_visits -> drawer [color="#7B1FA2", style=dashed]
|
||||
admin_dash -> sidebar [color="#7B1FA2", style=dashed]
|
||||
admin_dash -> navbar [color="#7B1FA2", style=dashed]
|
||||
|
||||
// Services to APIs
|
||||
http_service -> auth_api [color="#C62828"]
|
||||
http_service -> visits_api [color="#C62828"]
|
||||
http_service -> orders_api [color="#C62828"]
|
||||
http_service -> petowners_api [color="#C62828"]
|
||||
http_service -> vets_api [color="#C62828"]
|
||||
http_service -> services_api [color="#C62828"]
|
||||
http_service -> cart_api [color="#C62828"]
|
||||
|
||||
// Services to Backend
|
||||
auth_api -> api_auth [label="POST /api/token/", color="#455A64"]
|
||||
visits_api -> api_mascotas [label="CRUD /vet-visits/", color="#455A64"]
|
||||
orders_api -> api_solicitudes [label="CRUD /service-requests/", color="#455A64"]
|
||||
petowners_api -> api_mascotas [label="CRUD /pet-owners/", color="#455A64"]
|
||||
vets_api -> api_mascotas [label="GET /veterinarians/", color="#455A64"]
|
||||
services_api -> api_productos [label="GET /services/", color="#455A64"]
|
||||
cart_api -> api_productos [label="CRUD /cart/", color="#455A64"]
|
||||
|
||||
// State connections
|
||||
auth_slice -> redux_store [color="#00838F"]
|
||||
visits_slice -> redux_store [color="#00838F"]
|
||||
cart_slice -> redux_store [color="#00838F"]
|
||||
auth_context -> redux_store [color="#00838F", style=dashed]
|
||||
|
||||
// User access paths
|
||||
petowner_user -> home [label="public access", color="#AD1457"]
|
||||
petowner_user -> profile_page [label="authenticated", color="#AD1457", style=dashed]
|
||||
vet_user -> admin_dash [label="backoffice", color="#AD1457"]
|
||||
admin_user -> admin_dash [label="full access", color="#AD1457"]
|
||||
|
||||
// API routing through HttpService
|
||||
http_service -> api_auth [label="JWT refresh", color="#455A64", style=dashed]
|
||||
}
|
||||
Reference in New Issue
Block a user