Mockups

Every screen. Every flow.

33 production screens across 3 portals, each built with Liquid Spatial components. Click any node to preview the screen, or hover to see its connections in the flow.

Admin Portal22
Parent Portal8
Super Admin3
Total:33 screens

Core

2 screens
A01
Login

Shared authentication with role-based redirect

LiquidFormInputsGlassCardAmbientBackground
A02
Dashboard

KPIs, revenue charts, activity feed, quick actions

KPIConstellationLiquidEChartsActivityTimeline+2

Students

3 screens
A03
Students

Student roster with grade, section, status, and scholarship filters

EnterpriseDataTableGlassSidebarPageHeader
A04
Student Detail

Profile card, family info, invoice history, payment timeline

LiquidProfileCardSmartInvoiceCardTimelineView+1
A05
Enrollment

Multi-step enrollment: student → family → grade → scholarship

LiquidProgressStepsLiquidFormInputsGlassModal

Families

2 screens
A06
Families

Family accounts with children count, balance, and contact info

EnterpriseDataTableGlassSidebar
A07
Family Detail

Contact info, children list, total balance, payment history

LiquidProfileCardEnterpriseDataTableKPIWidget

Financial

7 screens
A08
Invoices

All invoices with status, date range, concept, and amount filters

EnterpriseDataTableStatusBadgeDateRangePicker
A09
Invoice Detail

Full invoice view with CFDI preview, payment history, actions

InvoicePreviewSmartInvoiceCardStatusBadge
A10
Create Invoice

Invoice creation with concept, amount, student, due date, recurrence

LiquidFormInputsSearchSelectGlassModal
A11
Payments

Payment transactions with method, status, date, and bank filters

EnterpriseDataTableStatusBadgeCollectionDonut
A12
Payment Detail

Transaction info, Stripe data, CFDI link, reconciliation status

GlassCardStatusBadgeTransactionLedger
A13
Reconciliation

Bank vs system matching with automated reconciliation

ReconciliationMatrixKPIConstellationLiquidECharts
A14
Scholarships

Scholarship and discount management with approval workflow

EnterpriseDataTableGlassModalLiquidProgressSteps

Communication

1 screen
A15
Notifications

Sent/scheduled notifications, templates, bulk messaging

EnterpriseDataTableGlassModalLiquidFormInputs

Reports & AI

3 screens
A16
Reports

Pre-built reports grid with AI copilot entry point

GlassCardKPIWidgetAIIcon
A17
AI Copilot

Full-screen AI chat with report generation and chart rendering

AICopilotChatAIAgentResultsLiquidECharts
A18
Report Viewer

Generated report with PDF download and shareable link

GlassCardLiquidEChartsKPIConstellation

Administration

4 screens
A19
School Settings

School info, payment config, academic periods, fee structures

LiquidTabsLiquidFormInputsGlassCard
A20
Users & Roles

User management with RBAC role assignment

EnterpriseDataTableGlassModalStatusBadge
A21
API Keys

Developer portal for external API key management

EnterpriseDataTableGlassCardGlassModal
A22
Audit Log

Immutable activity log with user, action, and entity filters

EnterpriseDataTableStatusBadge

Parent Core

4 screens
P01
Parent Dashboard

Children overview, pending payments, recent activity

KPIConstellationSmartInvoiceCardGlassCard
P02
My Children

List of children with school, grade, and balance per child

GlassCardStatusBadgeKPIWidget
P03
Child Detail

Child profile, grades, schedule, invoice history

LiquidProfileCardSmartInvoiceCardTimelineView
P08
My Profile

Personal info, payment methods, notification preferences

LiquidFormInputsLiquidTabsGlassCard

Parent Finance

4 screens
P04
My Invoices

All invoices across children with status and date filters

EnterpriseDataTableStatusBadge
P05
Pay Now

Payment flow with card, SPEI, and OXXO method selection

PaymentFlowTerminalSmartInvoiceCard
P06
Confirmation

Payment success with CFDI download and confetti animation

GlassCardConfettiStatusBadge
P07
CFDI Invoices

Fiscal invoice list with PDF/XML download

EnterpriseDataTableInvoicePreview

Platform

3 screens
S01
Network Overview

Cross-network KPIs, regional performance, system health

KPIConstellationLiquidEChartsEnterpriseDataTable
S02
School Management

All schools in the network with KPIs and management

EnterpriseDataTableKPIConstellationGlassCard
S03
Global Config

Feature flags, payment methods, CFDI config, security

ToggleSwitchGlassCardLiquidTabs

User Flow Connections

Admin Portal
A01LoginA02Dashboard
A01LoginP01Parent Dashboard
A01LoginS01Network Overview
A02DashboardA03Students
A02DashboardA06Families
A02DashboardA08Invoices
A02DashboardA11Payments
A02DashboardA16Reports
A02DashboardA15Notifications
A03StudentsA04Student Detail
A04Student DetailA05Enrollment
A06FamiliesA07Family Detail
A08InvoicesA09Invoice Detail
A08InvoicesA10Create Invoice
A11PaymentsA12Payment Detail
A11PaymentsA13Reconciliation
A02DashboardA14Scholarships
A02DashboardA19School Settings
A19School SettingsA20Users & Roles
A19School SettingsA21API Keys
A19School SettingsA22Audit Log
A16ReportsA17AI Copilot
A17AI CopilotA18Report Viewer
Parent Portal
P01Parent DashboardP02My Children
P01Parent DashboardP04My Invoices
P01Parent DashboardP08My Profile
P02My ChildrenP03Child Detail
P04My InvoicesP05Pay Now
P05Pay NowP06Confirmation
P01Parent DashboardP07CFDI Invoices
Super Admin
S01Network OverviewS02School Management
S01Network OverviewS03Global Config

Component Usage Matrix

ComponentUsed InScreens
EnterpriseDataTable14
A03A06A07A08A11A14A15A20A21A22P04P07S01S02
GlassCard12
A01A12A16A18A19A21P01P02P06P08S02S03
StatusBadge9
A08A09A11A12A20A22P02P04P06
LiquidFormInputs6
A01A05A10A15A19P08
KPIConstellation6
A02A13A18P01S01S02
GlassModal6
A05A10A14A15A20A21
LiquidECharts5
A02A13A17A18S01
SmartInvoiceCard5
A04A09P01P03P05
GlassSidebar3
A02A03A06
LiquidProfileCard3
A04A07P03
KPIWidget3
A07A16P02
LiquidTabs3
A19P08S03
TimelineView2
A04P03
LiquidProgressSteps2
A05A14
InvoicePreview2
A09P07