# WS Demo — Module Map (Prototype → Production)

Maps interactive prototype modules to **Spring Boot** packages and **React** feature folders.

---

## Registry modules

| Prototype ID | Prototype file | Spring module | React package | Nav prefix |
|--------------|----------------|---------------|---------------|------------|
| `dashboard` | `modules/dashboard.js` | `ws-app` (aggregator) | `shell/dashboard` | `*_dashboard` |
| `structure` | `modules/structure.js` | `ws-structure` | `modules/structure` | `ta_structure`, `ta_company`, `ta_divisions` |
| `finance-gl` | `modules/finance-gl.js` | `ws-finance` | `modules/finance` | `to_fin_*`, `to_gl_*` |
| `contacts` | `modules/contacts-crm.js` | `ws-crm` | `modules/contacts` | `ta_contacts` |
| `crm` | `modules/contacts-crm.js` | `ws-crm` | `modules/crm` | `to_crm`, `to_case_*`, `to_comm_*` |
| `service-requests` | `modules/service-requests.js` | `ws-operations` | `modules/service-requests` | `to_sr_*` |
| `billing` | `modules/billing-ar-ap.js` | `ws-finance` | `modules/billing` | `to_invoicing`, `to_ap_*`, `to_ar_*` |
| `vendor-portal` | `modules/vendor-portal.js` | `ws-procurement` | `modules/vendor-portal` | `to_vp_*` |
| `isp-billing` | `modules/isp-billing.js` | `ws-billing` | `modules/billing` | `to_billing_*`, `to_service_links` |
| `sales` | `modules/sales.js` | `ws-sales` | `modules/sales` | `to_sales`, `to_prospects`, `to_quotation` |
| `technical` | `modules/technical.js` | `ws-technical` | `modules/technical` | `to_technical`, `to_installation`, `to_activation` |
| `inventory` | `modules/inventory.js` | `ws-inventory` | `modules/inventory` | `to_inv_*`, `to_fixed_assets` |
| `whistleblow` | `modules/whistleblow.js` | `ws-compliance` | `modules/whistleblow` | `to_wb_*` |
| `access` | `modules/access-approval-platform-ops.js` | `ws-access` | `modules/access` | `ta_access_*`, `pa_access` |
| `approval` | `modules/access-approval-platform-ops.js` | `ws-approval` | `modules/approval` | `ta_aw_*`, `ta_approval*` |
| `platform` | `modules/access-approval-platform-ops.js` | `ws-platform` | `modules/platform` | `pa_*` |
| `operations` | `modules/access-approval-platform-ops.js` | `ws-operations` | `modules/operations` | `to_ss_*`, `to_wb_*` |

---

## Spring Boot package layout

```
com.vdt.ws
├── app                    # WsApplication, config, actuator
├── tenancy
│   ├── TenantContext
│   ├── TenantConnectionRouter
│   └── TenantFilter
├── platform
│   ├── api.TenantController
│   ├── domain.Tenant
│   └── domain.PlatformApplication
├── structure
│   ├── api.DivisionController
│   └── domain.OrgDivision
├── finance
│   ├── api.JournalEntryController
│   ├── api.ChartOfAccountController
│   └── service.JournalPostingService
├── crm
├── access
├── approval
└── operations
```

---

## React route map (suggested)

| Route | Component | Prototype screen |
|-------|-----------|------------------|
| `/` | `DashboardPage` | `WSDashboardModule.render` |
| `/structure/divisions` | `DivisionsPage` | `WSStructureModule` → `org_divisions` |
| `/structure/departments` | `DepartmentsPage` | `org_departments` |
| `/finance/chart-of-accounts` | `CoaPage` | `renderCoa` |
| `/finance/journals` | `JournalsPage` | `renderJournals` |
| `/finance/transactions` | `TransactionsPage` | `renderTransactions` |
| `/finance/currencies` | `CurrenciesPage` | `renderCurrencies` |
| `/contacts` | `ContactsPage` | `WSContactsModule` |
| `/crm/cases` | `CasesPage` | `WSCrmModule` |
| `/access/categories` | `AccessCategoriesPage` | `WSAccessModule` |
| `/approval/requests` | `ApprovalRequestsPage` | `WSApprovalModule` |
| `/platform/tenants` | `TenantsPage` | `WSPlatformModule` |

Nav node IDs from `navigation-data.js` should be preserved as `meta.nodeId` for RBAC checks.

---

## Module contract (both stacks)

```
handles(nodeId: string): boolean
getScreen(nodeId: string): string
render(ctx) / <Screen ctx={ctx} />
```

**React:** Replace `handles` with route config + RBAC guard.  
**Spring:** One `@RestController` per aggregate root; sub-screens = query params or sub-resources.

---

## Shared UI components (prototype → React)

| Prototype | React component |
|-----------|-----------------|
| `js/ui/crud.js` | `<EntityCrudTable />` |
| `js/ui/modal.js` | `<FormModal />` |
| `js/ui/toast.js` | toast provider (sonner / radix) |
| `js/ui/utils.js` | `formatCurrency`, `escapeHtml` utilities |
| `.ws-module-badge` | `<ModuleBadge module="Finance" />` |

---

## Cross-cutting concerns

| Concern | Prototype | Backend | Frontend |
|---------|-----------|---------|----------|
| Session | `workspace-state.js` | JWT + refresh | Auth context |
| Tenant | `tenancy.js` | `TenantContext` | Tenant context |
| Company | `tenancy.js` | `CompanyContext` | Company switcher |
| Currency | `currency.js` | `CurrencyService` | `useCurrency()` hook |
| Data access | `store.js` / `api-client.js` | JPA repositories | React Query |
| Activation | `activation-engine.js` | `ServiceActivationService` | activation mutations |
| Conversion | `conversion-engine.js` | `LeadConversionService` | conversion actions |
| Commission | `commission-engine.js` | `CommissionService` | commission workflow |
| Inventory | `inventory-engine.js` | `InventoryService` | receipt & kit issue |
| ISP billing | `billing-engine.js` | `IspBillingService` | billing run actions |