02Data Grid / Spreadsheet ViewAdvanced interactive table with frozen columns, inline editing, conditional formatting, and bulk actions
Inventory Valuation
248 items
3 rows selected
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%
Showper pageShowing 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.
03Kanban BoardDrag-and-drop order processing pipeline with priority badges and quick filters
Order Pipeline
24 active orders
New3
⋮⋮
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
Processing2
⋮⋮
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
Picking2
⋮⋮
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
Packing1
⋮⋮
SO-24876
Harbor Foods LLC
10 line items -- 7,800 lbs
Requested: May 20
Shipped2
⋮⋮
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
Delivered1
⋮⋮
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.
04Calendar / SchedulerFull calendar with month/week/day views, color-coded events, and detail popups
■ 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.
05Chart Dashboard BuilderConfigurable 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
Cheddar 40%Mozz 30%Swiss 18%Other 12%
WAREHOUSE UTILIZATION
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.
06Tree / Hierarchy ViewExpandable 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: 1Assembly
■ 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.
07Timeline / Activity FeedVertical timeline for record history with color-coded events, attachments, and threaded comments
SO-24891 Activity Log
12 events
✓
Michael Levinecreated this order
May 19, 2026 -- 09:14 AM
Customer: Good Eats Inc. | Lines: 12 | Total: $18,432.00
✓
Systemauto-approved (within credit limit)
May 19, 2026 -- 09:14 AM
Credit Limit: $500,000 | AR Balance: $142,800 | Available: $338,768
✎
Michael Levineadded 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.
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.
08Split Panel / Master-DetailTwo-panel layout with scrollable list and detail view, responsive collapse on mobile
■ 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.
09Wizard / Multi-Step FormStep-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.
10Command Palette / Quick ActionsKeyboard-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
ESC to close
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.
11Notification CenterBell 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.
■ 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.
12Contextual Help / TooltipsInline 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