185 lines
7.5 KiB
Plaintext
185 lines
7.5 KiB
Plaintext
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]
|
|
}
|