Generated page. Written from IdaMilk/SunApps at commit 61fbfba on 2026-07-28, version 4.1.2. Corrections belong in the repository.
SunApps
What is it?
A Progressive Web App built in Vue 3 that acts as the central portal for Suntado's internal manufacturing and operations tooling. It is what plant staff actually open to do their jobs — creating work orders, moving pallets, receiving milk trucks, entering quality results, releasing product.
Roughly forty screens sit behind one login, all talking to the SunApps Gateway.
Purpose
Before it existed, these operations meant either working directly in NetSuite or using separate tools per task. SunApps consolidates them into one touch-friendly interface that works on the plant floor, installs as an app on a tablet, and shows real-time production state.
The PWA packaging matters: it runs on warehouse devices without an app store, and it can be updated centrally.
How it Works
Vue 3 with <script setup>, routed by Vue Router, with state in Pinia stores. Each functional area gets a store, and stores are the boundary between UI and network — components read from the store, the store calls a service, the service calls the gateway.
A request to complete a work order flows: the view dispatches to workOrderCompletionStore, which calls a service in src/services/, which issues an Axios request to the gateway. The gateway proxies to the Manufacturing or NetSuite service, and the result lands back in the store where every component bound to it re-renders.
Two things run outside that request/response loop. useSocket.js holds a Socket.IO connection to the gateway and joins rooms — the staging dashboard and KPI displays update when the server pushes, not when the user refreshes. And useVersionSync.js listens for the gateway's version broadcast, so when a new release is deployed, open clients find out.
Core Features
Grouped as the router organises them.
| Area | Screens |
|---|---|
| Work orders | Work order list and status, BOM view, per-order overview, completion (including backdated), component issuing |
| Staging | Staging management, staging dashboard, per-work-order staging |
| Inventory | Bin lookup, bin transfer, inventory count |
| Pallets | List, detail, create, transfer, adjust, audit, reprint, status change |
| Receiving | Purchase order list and detail, receive item, receive from external |
| Shipping | Shipping requests, item fulfilment, unship |
| Milk | Active milk trucks, milk receiving, diverted trucks, milk diverting |
| Quality | Create sample, per-work-order sample, release product, QCI release, pending external results and entry |
| Tools | API sandbox, manual entry, bugs list, Kaizen submissions |
The API sandbox is worth calling out — it is an in-app client for testing gateway endpoints, using CodeMirror as the editor. Handy when diagnosing an integration without leaving the app.
State stores
| Store | Owns |
|---|---|
adminStore | Admin functions and permissions |
userStore | Authentication, session, preferences |
workOrderStore | Work order data |
workOrderCompletionStore | Completion workflow |
palletStore | Pallet lifecycle |
purchaseOrderStore | Receiving |
itemFulfillmentStore | Shipping |
qualityStore | QC tests and results |
sampleStore | Sample tracking |
releaseStore | Product release |
manualEntryStore | Manual data entry |
ediStore | EDI data |
kpiStore | KPI display data |
productionSchedulerStore | Production schedule |
Tech Stack
Versions are taken from package.json, not the README — see the note under Repository.
| Technology | Version | Purpose |
|---|---|---|
| Vue | 3.5.34 | Framework |
| Vue Router | 5.0.7 | Routing |
| Pinia | 3.0.4 | State management |
| Bulma | 1.0.4 | CSS framework |
| Axios | 1.16.1 | HTTP client |
| socket.io-client | 4.8.3 | Real-time updates |
| Chart.js | 4.5.1 | KPI and dashboard charts |
| vue-chartjs | 5.3.3 | Vue bindings for Chart.js |
| CodeMirror | 6.0.2 | API sandbox editor |
| Flatpickr | 4.6.13 | Date pickers |
| Font Awesome | 7.2.0 | Icons |
| vue-ganttastic | 2.3.2 | Production scheduler Gantt chart |
| oauth-1.0a | 2.2.6 | OAuth 1.0a signing for NetSuite |
| Vite | (dev) | Build tool |
| vite-plugin-pwa | (dev) | Service worker and installability |
Node 22 or higher.
Interfaces
| System | Direction | Purpose |
|---|---|---|
| SunApps Gateway | outbound | All API traffic |
| Gateway Socket.IO | inbound | Staging, KPI and version broadcasts |
| Zebra printers | outbound | Label printing via ZebraPrintService and AutoPrintService |
| Jira | outbound | Bug submission via jiraService |
NetSuiteApiService.js and oauth-1.0a in the front-end suggest some NetSuite calls are signed client-side rather than going through the gateway. Worth confirming before relying on either path.
Operations
Built with Vite and deployed by GitHub Actions on release publish or manual dispatch. The workflow checks out the tag, builds with production configuration, deploys to an internal Windows application server under a process supervisor, writes the new version into the SQL database — which is what drives the gateway's version broadcast — and notifies Microsoft Teams. Separate workflows cover development and production tagging.
Configuration is Vite environment variables, supplied at build time. Names only:
| Variable | Purpose |
|---|---|
VITE_API_BASE_URL | Gateway base URL |
VITE_AUTH_URL | Authentication endpoint |
VITE_BACKEND_URL | Backend service URL |
VITE_NS_URL | NetSuite URL |
VITE_ENVIRONMENT_FILTER | Environment gating |
VITE_APP_VERSION | Version stamp used for update detection |
These are build-time substitutions, not runtime configuration — changing one means rebuilding.
scripts/ holds a set of one-off operational repair scripts, run by hand: clearing consumption bins, deleting item receipts by lot, diagnosing and resetting stuck work orders, fixing pallet lot references. Their existence is a useful signal about where this system needs manual intervention most often.
Repository
| Repository | IdaMilk/SunApps |
| Version | 4.1.2 |
| Primary language | Vue / JavaScript |
| Files | 233 |
| Last activity | 2026-07-27 |
| Status | Active |
The README's tech stack list has drifted from package.json. It states Vue Router 4.6 where the manifest pins 5.0.7 — a major version apart — and also understates Axios (1.13 vs 1.16.1) and Font Awesome (7.1 vs 7.2.0). The table above follows the manifest.