Wireframe Prototype · v0.1

ShunoPro — Storage Customer Management System

Click-through wireframes for the proposed operational and administrative surfaces. Use the sitemap below to explore the intended flow between screens, or jump into any screen from the left sidebar.

Target market
Japanese rental-space operators: self-storage, parking, marinas, containers, lockers.
Core flow
Units → Customers → Billing → Payments → Reporting.
Design principle
One-page customer management; 1–2 clicks to any action.
Automation
Rule-driven daily processing with Stripe autopay.

Sitemap & page flow

Click any node to jump into that screen.

Operations Automation Admin Reference
flowchart LR Home([Prototype Home]):::home Units[Units & Customers
Main Dashboard]:::ops Cust[Customer Details
Account Center]:::ops Pay[Payments
Read-only Monitor]:::ops Rep[Reports
Financial · Ops · Collections]:::ops Daily[Daily Processing
Billing Engine Run]:::auto Loc[Locations]:::admin UT[Unit Types & Rates]:::admin BC[Billing Cycle Rules]:::admin Users[Users & Roles]:::admin Model[(Data Model
ERD)]:::ref Home --> Units Home --> Model Units -->|double-click rented| Cust Units -->|double-click vacant| Cust Cust -->|add payment / refund| Pay Pay -->|click row| Cust Daily -->|charges + fees| Cust Daily -.executes rules.-> BC Loc --> Units Loc --> BC UT --> Cust BC --> Daily Users -.access control.-> Home Rep --> Cust click Home "index.html" "Prototype home" click Units "screens/units-customers.html" "Main dashboard" click Cust "screens/customer-details.html" "Customer Details" click Pay "screens/payments.html" "Payments monitor" click Rep "screens/reports.html" "Reports" click Daily "screens/daily-processing.html" "Daily processing" click Loc "screens/locations.html" "Locations" click UT "screens/unit-types.html" "Unit types & rates" click BC "screens/billing-cycles.html" "Billing cycle rules" click Users "screens/users.html" "Users & roles" click Model "model/index.html" "Data model" classDef home fill:#eef2ff,stroke:#6366f1,stroke-width:2px,color:#3730a3,font-weight:600; classDef ops fill:#ecfdf5,stroke:#10b981,color:#065f46,font-weight:500; classDef auto fill:#fffbeb,stroke:#f59e0b,color:#92400e,font-weight:500; classDef admin fill:#eef2ff,stroke:#818cf8,color:#3730a3,font-weight:500; classDef ref fill:#f4f4f5,stroke:#a1a1aa,color:#3f3f46,font-weight:500;

All screens

Units & Customers

Primary operational dashboard. Real-time grid of every unit across all locations.

Customer Details

One-page account center. Info, units, billing, methods, transactions, notes, files.

Daily Processing

Run the rule engine for a chosen date — charges, payments, late fees, status updates.

Payments

Read-only monitor across all payment activity. Filter failures, jump to customer.

Reports

Financial, operations, collections, activity — ten reports in a single view.

Locations

Manage each facility. Units live under a location — not globally.

Unit Types & Rates

Catalogue of sizes, climate, deposit and standard move-in rate.

Billing Cycle Rules

IF (trigger + condition) → THEN (action + notice). The heart of automation.

Users & Roles

Staff, manager, admin. MFA enforced on admin-tier accounts.

Data Model

Entity-relationship diagram showing the schema that supports this design.

Keyboard & interaction conventions

Navigation
  • ⌘K Global search (customers, units, invoices)
  • G then U Units & Customers
  • G then R Reports
  • ? Show all shortcuts
Unit grid
  • Double-click rented → Customer Details
  • Double-click vacant → Move-in flow
  • Double-click maintenance → Status change
  • / Focus search