# Adilas Hybrid Map Wireframe (v2)

## 1. Core UX Model

### 3-View Toggle
- **Dashboard View** → card-based daily work
- **Simple Map View** → simplified visual map with icons
- **Full Map View** → detailed relational map preserving original structure

### Main Idea
All 3 views use the **same underlying destinations**, but present them at different levels of complexity.

---

## 2. Top-Level Layout

### Desktop Layout

+----------------------------------------------------------------------------------+
| Logo / Corp Name | Global Search | Quick Actions | AI | View Toggle | Profile    |
+------------------+---------------------------------------------------------------+
| Left Sidebar     | Main Content Area                                             |
| Quick Links      |                                                               |
|                  | [ Dashboard View ]                                            |
|                  | [ Simple Map View ]                                           |
|                  | [ Full Map View ]                                             |
|                  |                                                               |
+------------------+---------------------------------------------------------------+
| Footer / Time Filters / Status / View Notes                                      |
+----------------------------------------------------------------------------------+

---

## 3. Persistent UI Zones

### A. Top Bar
Contains:
- corp/entity name
- quick search
- AI quick jump
- quick actions
- 3-way toggle
- profile / settings

### B. Left Sidebar
Modernized version of "My Quick Links"

Suggested items:
- Start New Cart
- Retail Quick Cart
- My Cart Favorites
- Password & Profile
- Quick Search
- Clock In/Out
- Customer Logs
- My Quotes
- Media / Content
- Exports
- Classic Homepage
- Chooser
- Favorites
- Logout

Behavior:
- collapsible
- icon + label on desktop
- icon-only collapsed mode
- slide-out drawer on mobile

### C. Bottom / Footer Bar
Contains:
- Today
- Yesterday
- Tomorrow
- This Week
- Last Week
- This Month
- Last Month
- YTD

Optional:
- system status
- active corp/location
- view hint text

---

## 4. Dashboard View (Execution Layer)

### Purpose
Fastest daily-use interface

### Structure
Responsive card grid with grouped sections

#### Suggested Card Groups

##### Sales
- Shopping Cart
- Customers
- Quotes
- Invoices
- Statements

##### Vendors
- Vendor/Payees
- A/P
- Expense Receipts
- Splits
- REI’s

##### Inventory / Operations
- POs
- Stock/Units
- General Inventory
- Recipe Builds
- Line Items
- Floor Plan → Titles & funding for serialized inventory tools

##### Finance
- Banks
- Deposits
- P&L
- Balance Sheet
- Reports

##### People
- Users / Employees
- Payroll
- Time Cards
- Support / Training

##### Platform / System
- Flex Grid Tie-Ins
- Objects & Data Over Time
- Settings
- Admin
- Tools / Maintenance
- Photos & Scans
- Ideas & Sharing
- Web Presence / eCommerce

### Card Pattern
Each card includes:
- icon
- title
- short descriptor
- click target
- optional badges / live counts later

---

## 5. Simple Map View (Bridge Layer)

### Purpose
Simplified visual map for onboarding, orientation, and quick navigation

### Design Goals
- preserve major original positioning
- reduce box clutter
- use icons for recognition
- keep flow understandable

### Visual Layout

+----------------------------------------------------------------------------------+
| [ Tools ]     [ Flex Grid Tie-Ins ]                         [ Reports ]          |
| [ Photos ]    [ P&L / Financial Layer ]                     [ Customer Logs ]    |
|                                                                                  |
| [ Order / Manufacturing ] [ Expenses ] [ Balance Sheet ] [ Banks ] [ Deposits ] |
| [ Vendor / Payees ]       [ AP / Splits ] [ Users ] [ Payroll ] [ AR ]          |
|                                                                 [ Customers ]    |
| [ POs ] [ Stock / Units ] [ General Inventory ] [ Builds ] [ Invoices ]         |
|                                                     [ Quotes ] [ Shopping Cart ] |
|                                                                                  |
| [ Floor Plan ] [ Elements of Time / Scheduling ] [ Web Presence / eCommerce ]   |
| [ My Stuff ] [ Support ] [ Locations & Tax ] [ Settings ] [ Admin ] [ Ideas ]   |
+----------------------------------------------------------------------------------+

### Key Rules
- left side = incoming flow
- center = processing / inventory / users / concepts
- right side = outgoing flow
- top = reporting / finance / tie-ins
- bottom = foundation / operations / setup / time / location

### Use of Icons
Use icons for the 12 main players and major system anchors:
- Vendors
- Customers
- Inventory
- Banks
- Invoices
- Quotes
- Payroll
- Reports
- Time
- Settings
- Web Presence
- Users

### Interaction
- hover: short explanation
- click: go to destination
- optional highlight: related modules
- mobile: simplify to grouped bands or stacked zones

---

## 6. Full Map View (Truth Layer)

### Purpose
Preserve the deep relational model and original teaching value

### Design Goals
- keep as much original positioning and flow as possible
- modernize appearance
- improve readability and accessibility
- preserve detailed module-level granularity

### Layout Strategy
Use the original structure as the base:
- quick search top-left
- flex grid at top
- history/reports top-right
- vendors/on-order left edge
- customers/cart right edge
- inventory flow in lower middle
- finance and reporting above
- time + locations at bottom
- web presence bottom-right
- tools bottom-left

### Modernization Moves
- cleaner borders
- better spacing
- modern font hierarchy
- icons on major areas
- colored regions by category
- hover states
- keyboard accessibility
- responsive SVG or div-based overlay instead of old image map

---

## 7. Category Color/Style System

### Suggested Visual Grouping
- **Finance** → green or teal
- **Sales / Customers** → blue
- **Vendors / Incoming** → orange
- **Inventory / Operations** → purple
- **System / Admin** → gray
- **Time / Scheduling / Location** → gold
- **Web / External** → indigo

These should be soft and professional, not loud.

---

## 8. Flow Preservation Rules

These should remain true in both map modes:

### Horizontal Flow
- **Left → Right**
- incoming goods/services → internal processing → outgoing goods/services

### Vertical Flow
- **Bottom → Top**
- operational foundation → accounting outcomes → financial summaries

### Central Truth
- system revolves around:
  - users
  - objects & data over time
  - inventory / business objects moving through time

---

## 9. Mobile Behavior

### Dashboard View
- stacked cards
- sticky top bar
- sidebar becomes menu drawer

### Simple Map View
- grouped sections stacked vertically
- each region becomes a tappable card-band
- preserve left/center/right flow using section labels:
  - Incoming
  - Core Processing
  - Outgoing

### Full Map View
- not full desktop map by default
- either:
  - zoomable map canvas
  - or “guided map mode” with sectional drill-down

---

## 10. Suggested Build Order

### Phase A
Create shared data model for modules:
- name
- destination
- category
- description
- icon
- view visibility
- display priority

### Phase B
Build shell layout:
- top bar
- sidebar
- footer/time filters
- 3-view toggle

### Phase C
Build Dashboard View first

### Phase D
Build Simple Map View second

### Phase E
Build Full Map View third

### Phase F
Add live data, permissions, AI, and relationship highlighting later

---

## 11. View Definitions (Short Version)

### Dashboard View
"Help me do work"

### Simple Map View
"Help me understand where things are"

### Full Map View
"Help me understand how everything connects"

---

## 12. Special Note on Floor Plan
- **Floor Plan** → Titles & funding for serialized inventory tools
- Should stay visually near inventory / operations
- May need tooltip text because the name alone can be misleading