← Hub -- NetSuite Advanced UI Patterns
v10.0
02 Data Grid / Spreadsheet View Advanced interactive table with frozen columns, inline editing, conditional formatting, and bulk actions

Inventory Valuation

248 items
Item / SKU
Description ▲▼
Location ▲▼
On Hand ▲▼
Committed ▲▼
Available ▲▼
Unit Cost ▲▼
Total Value ▲▼
Margin % ▲▼
Status ▲▼
CHD-BRL-001 Barrel Cheddar, Grade A, 500lb Edgewood, NY 12,450
8,200
4,250
$2.1840 $27,190.80 34.2% In Stock
CHD-BLK-040 Block Cheddar, Sharp, 40lb Edgewood, NY 3,820
3,100
720
$2.4560 $9,381.92 28.7% Low Stock
MOZ-LMWM-006 Low-Moisture Mozzarella, Whole Milk Hermitage, PA 18,900
12,300
6,600
$1.9280 $36,439.20 31.5% In Stock
BUT-USDA-AA USDA Grade AA Butter, 25kg Edgewood, NY 840
780
60
$3.1200 $2,620.80 12.1% Critical
SWT-CRM-012 Swiss Cheese, Domestic, 180lb Wheel Hermitage, PA 5,200
2,400
2,800
$2.8400 $14,768.00 26.8% In Stock
PRV-SLC-008 Provolone, Sliced, 20lb Case Edgewood, NY 2,100
1,950
150
$3.4200 $7,182.00 18.4% Low Stock
CRD-SHR-005 Shredded Cheddar/Jack Blend, 5lb Hermitage, PA 9,600
4,800
4,800
$2.7600 $26,496.00 29.3% In Stock
TOTALS (7 items) 52,910 33,530 19,380 AVG $2.67 $124,078.72 AVG 25.9%
Show per page Showing 1-7 of 248
■ Click any On Hand / Committed / Available cell to inline edit. Checkbox rows for bulk actions. Frozen first column scrolls with the grid. Column headers sort on click. Toggle filter row with the Filters button.
03 Kanban Board Drag-and-drop order processing pipeline with priority badges and quick filters

Order Pipeline

24 active orders
New 3
⋮⋮
SO-24891
Good Eats Inc.
12 line items -- 8,400 lbs
Requested: May 22
⋮⋮
SO-24893
Metro Foods
6 line items -- 3,200 lbs
Requested: May 23
⋮⋮
SO-24895
Valley Distributors
3 line items -- 1,500 lbs
Requested: May 26
+ Add Order
Processing 2
⋮⋮
SO-24887
Atlantic Dairy Co.
8 line items -- 5,600 lbs
Requested: May 21
⋮⋮
SO-24889
Sunrise Markets
2 line items -- 800 lbs
Requested: May 28
Picking 2
⋮⋮
SO-24880
Northeast Foods
15 line items -- 11,200 lbs
Requested: May 20
⋮⋮
SO-24882
Capital Provisions
4 line items -- 2,000 lbs
Requested: May 24
Packing 1
⋮⋮
SO-24876
Harbor Foods LLC
10 line items -- 7,800 lbs
Requested: May 20
Shipped 2
⋮⋮
SO-24870
Good Eats Inc.
7 line items -- 4,200 lbs
Shipped: May 18
⋮⋮
SO-24872
Tri-State Wholesale
5 line items -- 3,600 lbs
Shipped: May 17
Delivered 1
⋮⋮
SO-24865
Metro Foods
9 line items -- 6,400 lbs
Delivered: May 16
■ Drag cards between columns to update order status. Cards show order number, customer, weight, requested date, and priority. Filter by priority or customer from the toolbar. Column card counts update dynamically.
04 Calendar / Scheduler Full calendar with month/week/day views, color-coded events, and detail popups
May 2026
SuMoTuWeThFrSa 262728293012 3456789 10111213141516 17181920212223 24252627282930 31123456
Event Types
Deliveries
Production Runs
Maintenance
Meetings
Deadlines
May 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
1
Bongards delivery - 8,400 lbs
2
3
4
5
Cheddar run - Line A
Vendor review call
6
Cheddar run - Line A
7
8
Metro Foods - 3,200 lbs
Cooler #3 PM check
9
10
11
12
Mozz run - Line B
13
14
USDA bid deadline
15
Good Eats - 11,200 lbs
Quarterly review
16
17
18
19
Swiss run - Line C
Ops standup
20
Harbor Foods - 7,800 lbs
21
Provolone - Line A
Packaging line service
22
Northeast - 4,200 lbs
PO confirmation cutoff
23
24
25
26
Cheddar run - Line A
27
28
Valley Dist - 1,500 lbs
29
30
■ Color-coded events: blue for deliveries, green for production, amber for maintenance, purple for meetings, red for deadlines. Today (May 19) highlighted. Mini calendar on left for quick navigation. Click events for detail popups.
05 Chart Dashboard Builder Configurable drag-and-drop widget layout with KPIs, charts, gauges, and auto-refresh

Operations Dashboard

Auto-refresh: 30s
REVENUE
$1.24M
Week ending May 19
+12.4% vs last week
ORDERS
248
Active orders
+8.2% vs last week
ON-TIME DELIVERY
96.2%
Last 30 days
+1.8% vs prior period
FILL RATE
98.7%
Order completeness
-0.3% vs last week
WEEKLY REVENUE
W14W15W16W17W18W19W20
$860K$940K$780K$1.08M$1.01M$1.18M$1.24M
ORDER VOLUME TREND
MonTueWedThuFriSatSun
PRODUCT CATEGORY MIX
248
Cheddar 40% Mozz 30% Swiss 18% Other 12%
WAREHOUSE UTILIZATION
82% CAPACITY
EDGEWOOD
78%
HERMITAGE
87%
TOP CUSTOMERS (THIS WEEK)
Good Eats Inc. $284,200
Metro Foods $196,800
Northeast Foods $168,400
Harbor Foods LLC $142,600
Valley Distributors $118,900
■ 12-column CSS grid layout. Widgets span configurable columns (3/4/6/8/12) and rows. Hover any widget to reveal settings gear and resize handle. Add Widget button for new chart types. Auto-refresh indicator pulses in toolbar. Save Layout persists per user/role.
06 Tree / Hierarchy View Expandable tree for BOM explosion, org charts, category navigation, and folder structures

BOM Explosion -- Assembly #ASM-4200

42 components
ASM-4200: Shredded Cheddar/Jack Blend Case (5lb x 4) QTY: 1 Assembly
SUB-110: Cheddar Shred Component QTY: 2 Sub-Assembly
CHD-BLK-040: Block Cheddar, Sharp, 40lb QTY: 3 $2.456/lb
ADD-001: Anti-caking Agent (Cellulose) QTY: 0.5 $1.200/lb
ADD-008: Natamycin Preservative QTY: 0.02 $48.00/lb
SUB-112: Monterey Jack Shred Component QTY: 2 Sub-Assembly
MJK-BLK-040: Block Monterey Jack, 40lb QTY: 3 $2.320/lb
ADD-001: Anti-caking Agent (Cellulose) QTY: 0.5 $1.200/lb
PKG: Packaging Materials QTY: 1 Packaging Group
PKG-BAG-5LB: Resealable Bag, 5lb, Printed QTY: 4 $0.180/ea
PKG-CS-20LB: Corrugated Case, 20lb capacity QTY: 1 $0.420/ea
PKG-LBL-GFS: GFS Product Label, UPC QTY: 4 $0.035/ea
■ Click any row with a triangle to expand/collapse. Icons differentiate assemblies (gear), sub-assemblies, raw materials (square), and components (circle). Quantity badges show per-unit requirements. Use Expand All / Collapse All for quick navigation. Search filters tree nodes in real time.
07 Timeline / Activity Feed Vertical timeline for record history with color-coded events, attachments, and threaded comments

SO-24891 Activity Log

12 events
Michael Levine created this order
May 19, 2026 -- 09:14 AM
Customer: Good Eats Inc. | Lines: 12 | Total: $18,432.00
System auto-approved (within credit limit)
May 19, 2026 -- 09:14 AM
Credit Limit: $500,000 | AR Balance: $142,800 | Available: $338,768
Michael Levine added a note
May 19, 2026 -- 09:22 AM
Priority order -- Good Eats needs this for their Memorial Day promotion. Confirm all 12 SKUs available before picking starts.
JR
Confirmed -- all SKUs in stock at Edgewood. Will prioritize this for AM pick.
Jake Rodriguez -- May 19, 09:38 AM
Michael Levine updated line 8 quantity
May 19, 2026 -- 10:05 AM
Item: MOZ-LMWM-006 | Changed: 800 lbs → 1,200 lbs | New Total: $19,204.80
📎
Michael Levine attached a document
May 19, 2026 -- 10:12 AM
GoodEats_PO_Confirmation_May2026.pdf 248 KB
Jake Rodriguez moved to Picking
May 19, 2026 -- 11:30 AM
Picker Assigned: Team Alpha | Est. Complete: 2:00 PM
↓ Load earlier activity (6 more events)
■ Each timeline event has a color-coded dot: green for creation/approval, blue for status changes, purple for comments, gray for system events. Comments support threaded replies. Attachments display inline with file size. Click "Load more" for infinite scroll.
08 Split Panel / Master-Detail Two-panel layout with scrollable list and detail view, responsive collapse on mobile
BG
Bongards Creameries
VND-1042 -- Barrel Cheddar
Active
GV
Great Valley Cheese
VND-1089 -- Mozzarella
Active
DP
Dairy Partners Int'l
VND-1103 -- Butter, Cream
Active
MW
Midwest Packaging Co.
VND-1156 -- Packaging
Active
CF
ColdFreight Logistics
VND-1178 -- Transportation
Active
SW
Swiss Valley Farms
VND-1201 -- Swiss Cheese
Inactive
Vendors / Bongards Creameries
Bongards Creameries
VENDOR ID
VND-1042
STATUS
Active
PRIMARY CONTACT
Dave Jordan, Sales Manager
PHONE
(507) 388-3570
ADDRESS
13200 County Rd 51, Bongards, MN 55368
PAYMENT TERMS
Net 30
YTD PURCHASES
$2,847,200
OPEN POs
$342,600
RECENT PURCHASE ORDERS
PO # DATE AMOUNT STATUS
PO-8847 May 15, 2026 $124,800 Open
PO-8812 May 8, 2026 $217,800 Receiving
PO-8779 May 1, 2026 $186,400 Received
■ Left panel scrollable vendor list with search filter. Right panel shows full detail of selected record with breadcrumb navigation. On mobile, panels stack vertically. Click any vendor in the list to load their details.
09 Wizard / Multi-Step Form Step-by-step form pattern for complex processes with validation, review, and draft saving

New Vendor Onboarding

Draft saved 2 min ago
Company Info
Contact Details
3
Banking / Payment
4
Compliance Docs
5
Review & Submit

Step 3: Banking & Payment Information

Enter the vendor's banking details for ACH/wire payments. All fields marked with * are required.
ABA routing transit number
Account number is required
■ Five-step wizard for vendor onboarding. Completed steps show checkmarks. Active step highlighted in blue. Validation errors shown inline (red border + message). Save Draft persists progress. Back/Next/Skip navigation at bottom. Final step is a review summary before submission.
10 Command Palette / Quick Actions Keyboard-triggered command palette (Cmd+K) for instant search, navigation, and quick create

Command Palette Demo

⌘K
Press ⌘K or click the button above to toggle
Quick Create
+
New Sales Order
Create a new SO from scratch
⌘⇧S
+
New Purchase Order
Create a new PO for vendor
⌘⇧P
+
New Work Order
Schedule a production run
⌘⇧W
Recent
SO-24891 -- Good Eats Inc.
Sales Order -- $18,432.00
PO-8847 -- Bongards Creameries
Purchase Order -- $124,800.00
Navigate
Inventory Dashboard
View real-time inventory levels
G then I
Order Pipeline
Kanban view of active orders
G then O
Run CME Price Update
Pull latest CME barrel/block prices
⌘⇧U
■ Cmd+K opens the palette from any page. Fuzzy search matches records, pages, and actions. Grouped into Quick Create, Recent, and Navigate. Keyboard navigation with arrow keys and Enter. Shortcuts shown inline per action. ESC to dismiss.
11 Notification Center Bell icon dropdown with categorized notifications, read/unread states, and inline actions

Notification Center Demo

Click the bell icon to toggle
7

Notifications

All 7
Orders 3
Approvals 2
Alerts 1
System 1
!
Low Stock Alert: BUT-USDA-AA has only 60 units available. Reorder point threshold breached.
2 minutes ago
Approval Required: PO-8852 for $86,400 from Valley Swiss exceeds auto-approval limit.
12 minutes ago
SO-24891 moved to Picking. Good Eats Inc. -- 12 line items, $18,432.00
28 minutes ago
Credit Hold: Sunrise Markets SO-24896 placed on credit hold. AR balance exceeds limit by $12,400.
1 hour ago
SO-24887 shipped via ColdFreight. Atlantic Dairy Co. -- Tracking #CF-28847291
2 hours ago
PO-8812 fully received at Edgewood. Bongards Creameries -- 40,000 lbs barrel cheddar.
3 hours ago
System: CME prices updated. Barrel cheddar: $1.8425 (+$0.0125). Block: $1.9050 (-$0.0075).
4 hours ago
■ Bell icon with unread count badge. Panel shows categorized tabs (All, Orders, Approvals, Alerts, System). Unread items have blue dot and light blue background. Inline action buttons for approvals and alerts. Mark all read clears unread states. Settings link at bottom.
12 Contextual Help / Tooltips Inline help system with field-level popovers, guided tour, Frosty chat widget, and keyboard shortcuts

Help System Components

FIELD-LEVEL HELP POPOVERS

CME Reference Price

The CME (Chicago Mercantile Exchange) spot price for barrel cheddar cheese. Updated daily. Used as the base for all cost calculations. GFS uses the trailing-week average to smooth daily volatility.

Moisture Premium Bracket

The additional cost percentage applied for cheese above standard moisture content (38-39%). Higher moisture means more weight per unit but lower solids. The bracket tiers are: 0-34% (standard), 35-37% (mid), 38%+ (high).

Freight Terms

FOB Destination: seller pays freight, risk transfers at delivery. FOB Origin: buyer pays freight from shipping point. Delivered: all-inclusive price with freight built in. Most GFS cheese sales use FOB Destination.

GFS Lot Code Format

Format: GFS-YYMMDD-XX where YY=year, MM=month, DD=day, XX=line + shift. Example: GFS-260519-A1 = May 19, 2026, Line A, Shift 1. Used for full traceability back to production run.

GUIDED TOUR OVERLAY
New Sales Order
STEP 1 OF 5

Create a Sales Order

Start by selecting a customer from the dropdown. The system will auto-populate their default ship-to address and payment terms.

KEYBOARD SHORTCUTS REFERENCE
Open Command Palette⌘K
New Sales Order⌘⇧S
New Purchase Order⌘⇧P
New Work Order⌘⇧W
Search Records/
Toggle Shortcuts?
Save Record⌘S
Refresh Data⌘R
Go to InventoryG I
Go to OrdersG O
Go to DashboardG D
Toggle Dark Mode⌘⇧D

Frosty

GFS Help Assistant -- Online
Hi there! I'm Frosty, your GFS help assistant. I can answer questions about NetSuite, pricing, inventory, or any GFS process. What can I help with?
09:14 AM
How do I set up a new vendor with custom payment terms?
09:15 AM
To set up a new vendor with custom terms: Go to Lists > Relationships > Vendors > New. Fill in Step 1 (Company Info), then on Step 3 (Banking), select your payment terms from the dropdown or create custom terms under Setup > Accounting > Terms.
09:15 AM
■ Four help system components: (1) Field-level help icons with hover popovers. (2) Guided tour overlay with spotlight highlighting and step-by-step tooltips. (3) Frosty chat widget in the corner for on-demand help. (4) Keyboard shortcut reference grid toggled with "?" key. All components integrate into any suitelet.
← Back to Hub · GFS Design System v10.0 · Global Food Solutions, Inc. · 131 Heartland Blvd, Edgewood, NY 11717