NetSuite Manager - Front Plugin

A comprehensive Front sidebar plugin that brings NetSuite ERP functionality directly into your Front conversations. Access customer data, manage invoices, track inventory, and more without leaving Front.

Learn more about this project on our Developer Portal and access the AI prompt file that created it.

⚠️ Important: This plugin was created using AI (inclusive of this readme). It's express purpose is to demonstrate how plugins can be quickly scaffolded using a prompt file fed to an AI agent. However, the code has not been reviewed for production readiness, nor should it be used in a production environment without a detailed engineering review. The functionality of the plugins is enabled through local pseudocode rather than functioning public APIs. Treat the programming patterns and informational text throughout this project—including in this readme—with a grain of salt. AI can hallucinate inaccurate information or suggest insecure, incorrect, inefficient, or inelegant best practices.

Features

🏢 Six Key NetSuite Modules

1. Financial Management

   • View open invoices and payment status
   • Financial summary dashboard
   • Create invoice reminder drafts
   • Track revenue, expenses, and cash flow

2. Inventory & Supply Chain

   • Real-time inventory levels
   • Low stock alerts
   • Location-based tracking
   • Average cost and pricing information

3. Customer Relationship Management

   • Customer and lead management
   • Contact information at your fingertips
   • Sales rep assignments
   • Lead qualification tracking

4. E-commerce

   • Sales order monitoring
   • Fulfillment status tracking
   • Order details and line items
   • Shipping information

5. Professional Services Automation

   • Project progress visualization
   • Time tracking vs. estimates
   • Budget alerts and warnings
   • Customer project associations

6. Analytics & Reporting

   • Key performance indicators
   • Custom SuiteQL query support
   • Quick report generation
   • Business metrics dashboard

🔧 Developer Features

• Debug panel (activate with ?debug=true)
• Front context inspection
• Message and attachment tracking
• Full TypeScript support
• Dark mode compatible

Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Front account with developer access

Local Development Setup

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Note the localhost URL where the plugin is running (typically http://localhost:3000)

Front App Configuration

4. Create a Front Developer App:

   • In your Front company settings, click Developers
   • Click Create App
   • Fill in the app details:
     • Name: "NetSuite Manager"
     • Description: "Access NetSuite data within Front conversations"

5. Add a Plugin Feature:

   • In your app settings, click Add Feature
   • Select Plugin as the feature type
   • Configure the plugin:
     • Name: "NetSuite Manager"
     • Type: Sidebar
     • URL: http://localhost:3000 (or your localhost URL)
     • For debug mode: http://localhost:3000?debug=true

6. Install the App:

   • Click Install in your app settings
   • Grant necessary permissions
   • The plugin will appear in your Front sidebar

Usage

Basic Usage

1. Open any conversation in Front
2. Click the NetSuite Manager plugin in the sidebar
3. Authenticate with NetSuite (simulated in demo)
4. Navigate between modules using the tabs
5. Interact with NetSuite data directly from Front

Creating Email Drafts

• In the Financial module, click "Create Reminder" on any invoice
• In the CRM module, click "Create Email" for customer outreach
• Drafts are created directly in your Front conversation

Debug Mode

Access advanced debugging features by appending ?debug=true to your plugin URL:

• View complete Front context data
• Inspect conversation details
• Monitor attachments
• Access technical documentation

Development

Project Structure

src/
├── components/
│   ├── NetSuiteManager.tsx      # Main component with tabs
│   ├── DebugPanel.tsx           # Debug interface
│   └── modules/                 # NetSuite modules
│       ├── FinancialManagement.tsx
│       ├── InventorySupplyChain.tsx
│       ├── CRM.tsx
│       ├── Ecommerce.tsx
│       ├── ProfessionalServices.tsx
│       └── AnalyticsReporting.tsx
├── providers/
│   └── FrontContext.tsx        # Front SDK context provider
├── services/
│   └── netsuiteService.ts      # NetSuite API simulation
├── App.tsx                      # Main app component
├── App.css                      # Component styles
└── index.css                    # Global styles

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

NetSuite API Patterns

The plugin simulates NetSuite's actual API patterns:

• OAuth 1.0 authentication flow
• RESTful endpoint structure
• SuiteQL query language
• Standard NetSuite record types

Mock Data

The plugin uses realistic mock data following NetSuite's data structures:

• Customer records with internal IDs
• Invoices with transaction IDs
• Sales orders with fulfillment status
• Inventory items with quantities
• Projects with time tracking

Customization

Adding New Features

1. Create a new module component in src/components/modules/
2. Add the module to NetSuiteManager.tsx tabs
3. Extend netsuiteService.ts with new API methods
4. Update styles in App.css

Connecting to Real NetSuite

To connect to an actual NetSuite instance:

1. Update netsuiteService.ts with real OAuth credentials
2. Replace mock API calls with actual NetSuite REST API calls
3. Implement proper token management
4. Add error handling for network requests

Styling

• CSS variables in index.css for theming
• Dark mode automatically detected
• Responsive grid layouts
• No horizontal scrolling in sidebar

Troubleshooting

Plugin Not Loading

• Verify the localhost URL matches your Front app configuration
• Check browser console for errors
• Ensure Front Plugin SDK is properly loaded

Authentication Issues

• Click "Connect to NetSuite" to simulate authentication
• Check localStorage for auth token
• Clear browser cache if needed

Data Not Displaying

• Verify conversation is selected in Front
• Check network tab for API calls
• Review console for error messages

Support

For issues or questions:

• Review the plugin-plan.md for technical details
• Check Front's Plugin SDK documentation
• Examine the debug panel for context information

License

This is a demonstration plugin with simulated data. Modify as needed for your NetSuite integration requirements.