SMXiCore CRM - User Manual

Complete guide to using the Customer Relationship Management system
Return to CRM

Table of Contents

System Overview

SMXiCore CRM is a comprehensive Customer Relationship Management system built with modern web technologies. The system provides tools for managing people, locations, jobs, and organizational data with a focus on usability and efficiency.

Key Features

  • ✓ Working People Management - Full CRUD operations
  • ✓ Working Location Management - Complete address system
  • ✓ Working Global Search - Cross-entity search
  • ✓ Working Dashboard Analytics - Real-time statistics
  • ✓ Working Data Export - CSV download functionality
  • ✓ Working Authentication System - Session management
  • ✓ Working API Integration - RESTful endpoints
  • ✓ Working Responsive Design - Mobile-friendly UI
  • ✓ Working Unsaved Changes Protection - Visual indicators
  • ✓ Working Error Reporting - Copy-to-clipboard diagnostics
  • ✓ Working Form Validation - Real-time field validation

Technical Architecture

  • Frontend: HTML5, CSS3, JavaScript (ES6+), Bootstrap/Tabler UI
  • Backend API: RESTful API at 100.78.23.29/api
  • Data Storage: Browser localStorage for client-side persistence
  • Authentication: Session-based with automatic token management

Getting Started

System Requirements

  • Modern web browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
  • JavaScript enabled
  • Internet connection for API access
  • Screen resolution: 1024x768 minimum (responsive design supports mobile)

Accessing the System

  1. Navigate to the CRM application URL
  2. Enter your username and password on the login screen
  3. Click "Sign In" to access the dashboard

First Time Setup

Upon first login, the system will:

  • Initialize your user profile
  • Load default dashboard widgets
  • Set up notification preferences
  • Configure search history tracking

Dashboard ✓ Working

The dashboard provides an overview of your CRM data with real-time metrics and quick access to common functions.

Dashboard Features

  • Notification System: Real-time toast notifications for system events
  • Job Polling: Automatic background polling for new jobs
  • Quick Actions: Fast access to create new records
  • Data Refresh: Manual refresh button for latest data

Available Actions

Notification Demo
Test the notification system with sample alerts
Refresh Dashboard
Reload all dashboard data and metrics

Job Polling System

The dashboard includes automatic job polling that:

  • Fetches new jobs from the API every 2-5 minutes
  • Shows notifications for new job alerts
  • Updates the job notifications dropdown
  • Can be started/stopped manually

People Management ✓ Working

Comprehensive system for managing individual contacts and customers with full CRUD operations.

Core Features

  • Person List View: Paginated table with search and filtering
  • Person Edit Form: Complete form for creating/editing person records
  • Inline Editing: Quick edit capabilities directly in the table
  • Status Management: Active, Gone Away, Deceased status tracking
  • Contact Information: Email, phone, address management

Person Fields

Required Fields:
  • First Name
  • Last Name
Optional Fields:
  • Email Address
  • Mobile Phone
  • External ID
  • Person Status

Available Operations

  • Create: Add new person records via "Add New Person" button
  • Read: View person details in list or edit form
  • Update: Edit existing records via edit form or inline editing
  • Delete: Remove person records (with confirmation)
  • Search: Find people by name, email, or phone

Navigation

  • Access via CRM → People in the main navigation
  • Direct URL: #people
  • Edit person: #person-edit?id={personId}
  • New person: #person-new

Location Management ✓ Working

Manage physical locations, offices, and addresses with comprehensive location data.

Core Features

  • Location List View: Table view of all locations
  • Location Edit Form: Detailed form for location management
  • Address Management: Complete address information
  • Location Search: Find locations by name, address, or city

Location Fields

Required Fields:
  • Location Name
Optional Fields:
  • Address
  • City
  • State/Region
  • Location Type

Available Operations

  • Create: Add new locations
  • Read: View location details
  • Update: Edit existing location information
  • Delete: Remove location records
  • Search: Find locations by various criteria

Navigation

  • Access via CRM → Locations in the main navigation
  • Direct URL: #locations
  • Edit location: #location-edit?id={locationId}

Membership Management ✓ Working

Comprehensive membership hierarchy and pricing management

The CRM system implements a sophisticated three-tier membership structure designed to accommodate various membership types with flexible pricing and criteria management.

Membership Hierarchy

Three-Tier Structure
  1. Membership Classes - Top-level categories (e.g., "Premium", "Corporate", "Student")
  2. Membership Levels - Specific tiers within classes (e.g., "Gold", "Silver", "Bronze")
  3. Membership Costs - Historical pricing information with effective dates
Membership Classes Features
  • ✓ Working Create and manage membership categories
  • ✓ Working Set maximum member limits per class
  • ✓ Working Configure allowed period types (Annual, Monthly, Both)
  • ✓ Working Status management (Active/Inactive)
  • ✓ Working Modern dropdown action menus
Membership Levels Features
  • ✓ Working Define specific membership tiers
  • ✓ Working Set eligibility criteria
  • ✓ Working Individual member limits per level
  • ✓ Working Rich text descriptions
  • ✓ Working Integrated cost management
Pricing & Cost Management
  • ✓ Working Historical pricing tracking
  • ✓ Working GBP £ currency display
  • ✓ Working Monthly and annual pricing options
  • ✓ Working Effective date management
  • ✓ Working Current cost identification
Member Management
  • ✓ Working Assign people to membership levels
  • ✓ Working Member status tracking
  • ✓ Working Comprehensive member details modal
  • ✓ Working Export functionality (CSV, Excel, PDF)
  • ✓ Working Advanced filtering and search

Known Issue: MembershipClassId Validation

Issue: API schema validation error when creating membership levels.

Error: Property "MembershipClassId" does not refer to a known property in type "XData.Default.MembershipLevel"

Cause: The database requires MembershipClassId for foreign key relationships, but the formal API schema doesn't include this field in its specification.

Current Workaround: The system uses enhanced error dialogs to provide detailed diagnostic information and offers development mode fallbacks for testing.

Status: This is a schema alignment issue that requires backend API schema updates to include the MembershipClassId field.

Using Membership Management

  1. Create Membership Classes: Start by defining top-level categories like "Premium", "Standard", or "Student"
  2. Add Membership Levels: Within each class, create specific tiers like "Gold", "Silver", "Bronze"
  3. Set Pricing: Use "Manage Costs" to define initial pricing and track price changes over time
  4. Assign Members: Link people to appropriate membership levels based on their needs
  5. Monitor & Report: Use the comprehensive export and reporting features to track membership data

Best Practices

  • Planning: Design your membership structure before creating data
  • Naming: Use clear, descriptive names for classes and levels
  • Pricing: Set effective dates when changing prices to maintain historical records
  • Status Management: Use Active/Inactive status consistently across all entities
  • Regular Reviews: Periodically review membership structures and pricing

Enhanced Table System ✅ New

Advanced table functionality with server-side processing, enhanced pagination, and XData-compatible queries.

Table Features ✅ Working

  • Server-Side Pagination: Efficient handling of large datasets
  • Detailed Record Counts: Shows "Showing 1-10 of 50 records"
  • Clickable Page Numbers: Jump to any page with smart ellipsis
  • Column Sorting: Click headers to sort with visual indicators
  • XData-Compatible Queries: Uses proper OData parameters
  • Responsive Design: Works on mobile and desktop

Pagination Features

Enhanced Pagination Controls
  • Record Information: "Showing 1-10 of 50 records" instead of simple page numbers
  • Page Navigation: Clickable page numbers: [1] [2] [3] ... [8] [9] [10]
  • Smart Ellipsis: Shows relevant pages with "..." for large datasets
  • Previous/Next: Standard navigation buttons
  • Page Size Options: Choose 10, 25, 50, or 100 records per page

Column Sorting

  • Visual Indicators: Arrows show current sort direction
  • Click to Sort: Click any sortable column header
  • Toggle Direction: Click again to reverse sort order
  • Server-Side: Sorting handled by server for better performance

Search and Filtering

  • Real-time Search: Filter results as you type
  • Server-Side Filtering: Efficient processing for large datasets
  • XData-Compatible: Uses proper OData filter expressions
  • Case-Sensitive: ⚠️ Filters must match exact case

Updated Tables

  • People Table: Enhanced with all new features
  • Locations Table: Full pagination and sorting
  • Members Table: Server-side processing enabled

Using Enhanced Tables

  1. Navigate to any table view (People, Locations, Members)
  2. Use page size dropdown to select records per page
  3. Click page numbers to jump to specific pages
  4. Click column headers to sort data
  5. Use search box for real-time filtering

Job Notifications ✓ Working

Comprehensive job alert system with real-time notifications and persistent tracking.

Core Features

  • Smart Badge Display: Red notification badge shows unread job count
  • Bootstrap Dropdown: Professional dropdown interface (400px width)
  • Persistent Storage: Job read states maintained across browser sessions
  • API Integration: Connected to Job API at 100.78.23.29/api/Job
  • Individual & Bulk Actions: Mark individual jobs or all jobs as read

Notification Features

  • Timestamp-based Detection: Intelligent new job detection
  • Status Intelligence: Color-coded status badges
  • Time Formatting: Relative time display (e.g., "2h ago")
  • Modal Interface: Detailed job information in modal view

Using Job Notifications

  1. Look for the bell icon in the top navigation bar
  2. Red badge appears when unread jobs exist
  3. Click the bell icon to open the dropdown
  4. View job details, status, and timestamps
  5. Mark individual jobs as read or use "Mark All Read"

Job Status Types

  • Completed - Successfully finished jobs
  • Failed - Jobs that encountered errors
  • In Progress - Currently running jobs
  • Pending - Queued jobs waiting to start

Data Management ✓ Working

Comprehensive data handling with CRUD operations, validation, and persistence.

CRUD Operations

  • Create: Add new records with validation
  • Read: View and list records with pagination
  • Update: Edit existing records with change tracking
  • Delete: Remove records with confirmation dialogs

Data Validation

  • Required Field Validation: Ensures mandatory fields are completed
  • Format Validation: Email, phone number format checking
  • Real-time Validation: Immediate feedback as you type
  • Server-side Validation: API-level validation and error handling

Data Persistence

  • API Storage: Primary data stored via REST API
  • Local Storage: Client-side caching for performance
  • Session Storage: Temporary data during user session
  • Form State: Automatic form data preservation

Unsaved Changes Indicator ✓ New

Visual feedback system that tracks form modifications and prevents data loss:

How It Works
  • Automatic Detection: System monitors all form fields for changes
  • Visual Indicator: Floating indicator appears in bottom-right corner when changes are detected
  • Field Highlighting: Modified fields get orange left border and background tint
  • Quick Save: "Save Now" button in the indicator for immediate saving
  • Navigation Protection: Warns before leaving pages with unsaved changes
Visual Elements
  • Pulsing Red Dot: Animated indicator to draw attention
  • "Changes Pending" Text: Clear status message
  • Save Button Animation: Main save buttons pulse when changes are pending
  • Smooth Animations: Fade-in/fade-out effects for professional appearance
Supported Forms
  • People add/edit forms
  • Location edit forms
  • All forms with data-entity attribute (automatic detection)

Inline Editing

Quick edit functionality available in table views:

  • Click the edit icon in any table row
  • Fields become editable inline
  • Save or cancel changes
  • Automatic validation and error display

Error Reporting & Support ✓ New

Advanced error reporting system with copy-to-clipboard functionality for technical support:

Automatic Error Detection
  • API Failures: Automatically captures failed network requests
  • JavaScript Errors: Catches and reports runtime errors
  • User-Friendly Display: Professional slide-in error notifications
  • Technical Details: Complete error information for debugging
Error Report Features
  • One-Click Copy: Copy complete error details to clipboard
  • Formatted Output: Structured error information for support teams
  • Context Information: Includes page URL, timestamp, and user agent
  • Stack Traces: Complete error stack for technical diagnosis
  • Visual Feedback: Confirmation when error details are copied
Using Error Reports
  1. When an error occurs, a red notification box appears
  2. Click "Copy Error Details" button
  3. Paste the copied information when contacting support
  4. Error box auto-dismisses after 10 seconds
For Support Teams

Error reports include: Error message, stack trace, page URL, timestamp, browser information, and any relevant API response data. This comprehensive information enables faster problem resolution.

Session Management & Auto-Logout ✓ Working

Comprehensive session management with automatic logout for security:

Session Monitoring
  • Background Checks: System monitors session validity every 60 seconds
  • Token Renewal: Automatically attempts to refresh tokens 5 minutes before expiry
  • Page Visibility: Checks session when you return to the browser tab
  • Secure Storage: Uses session storage that clears when browser closes
Auto-Logout Scenarios
  • Session Expiry: After 1 hour of inactivity (development mode)
  • Token Failure: When authentication tokens become invalid
  • Renewal Failure: When automatic token refresh fails
  • Security Issues: When token validation detects problems
User Experience
  • Silent Renewal: Tokens refresh automatically without interrupting work
  • Graceful Logout: Clear notification when session expires
  • Immediate Redirect: Automatic return to login page
  • Session Restoration: Valid sessions restored when returning to the system
Important Notes
  • Sessions automatically clear when you close the browser
  • Unsaved changes may be lost if session expires - use the unsaved changes indicator
  • Multiple browser tabs share the same session
  • System will attempt to save your work before logging out when possible

Recent Updates & Enhancements

Latest improvements and new features

Version 2024.1 - December Updates

UI Enhancements
  • ✓ New Modern dropdown action buttons on all tables
  • ✓ New Enhanced error dialogs with copy-to-clipboard functionality
  • ✓ New Updated green color scheme (#3a8f6f)
  • ✓ New Improved table column alignment and sort buttons
  • ✓ New UK currency display throughout membership system
Membership Management
  • ✓ Fixed API schema compliance for level creation
  • ✓ Enhanced Dropdown actions for all membership tables
  • ✓ Enhanced Delete functionality with proper confirmations
  • ✓ Enhanced Export features generate actual downloadable files
  • ✓ Enhanced Member details modal with comprehensive information
Technical Improvements
  • ✓ Enhanced Global state manager for page size persistence
  • ✓ Fixed API service method naming standardization
  • ✓ Enhanced Error handling with detailed diagnostic information
  • ✓ Enhanced Form validation and status saving across all entities
Data Management
  • ✓ Working Person status saving in edit forms
  • ✓ Working Location status saving in edit forms
  • ✓ Enhanced Consistent page size management across all pages
  • ✓ Enhanced Improved error reporting with contextual solutions

API Error Dialogs

When API errors occur (such as InvalidJsonProperty), the system now displays detailed error dialogs with:

  • Specific error codes and messages
  • Contextual solutions and recommendations
  • Technical details for debugging
  • Copy-to-clipboard functionality for error reporting

Dropdown Actions

All tables now feature modern dropdown action buttons that consolidate multiple actions into space-efficient menus:

  • People: Edit Person, View Location, Delete Person
  • Locations: Edit Location, View People, Delete Location
  • Membership Classes: Edit Class, Delete Class
  • Membership Levels: Edit Level, Manage Costs
  • Active Members: Edit Member, View Details, Remove Member

API Integration ✓ Working

Centralized API configuration with comprehensive endpoint management and error handling.

API Configuration

Base URL: https://100.78.23.29/api
Timeout: 30 seconds
Retries: 3 attempts
Format: JSON

Available Endpoints

  • Person API: /api/Person - People management
  • Member API: /api/Member - Member management
  • Location API: /api/Location - Location management
  • Job API: /api/Job - Job notifications
  • Auth API: /api/auth/* - Authentication endpoints

API Features

  • OData Support: Advanced filtering and querying
  • Search Filters: Automatic search query generation
  • Pagination: Configurable page sizes (10, 25, 50, 100)
  • Error Handling: Comprehensive error messages and retry logic
  • Mock Data: Fallback data for development and testing

Request Headers

Content-Type: application/json
Accept: application/json
X-Requested-With: XMLHttpRequest

Error Handling

  • Network Errors: Automatic retry with exponential backoff
  • HTTP Errors: User-friendly error messages
  • Validation Errors: Field-specific error display
  • Timeout Handling: Graceful timeout with user notification

Troubleshooting

Common Issues

Login Issues
  • Verify username and password are correct
  • Check internet connection
  • Clear browser cache and cookies
  • Try incognito/private browsing mode
Search Not Working
  • Ensure you've typed at least 2 characters
  • Check API connectivity
  • Refresh the page and try again
  • Clear search history if needed
Data Not Loading
  • Check network connection
  • Verify API server is accessible
  • Look for error messages in browser console
  • Try refreshing the page

Browser Console

For technical issues, check the browser console:

  1. Press F12 to open developer tools
  2. Click the "Console" tab
  3. Look for error messages in red
  4. Copy error messages for support

Performance Tips

  • Use modern browsers for best performance
  • Clear browser cache periodically
  • Close unused browser tabs
  • Ensure stable internet connection

Getting Help

If you continue to experience issues:

  • Document the steps that led to the problem
  • Note any error messages
  • Include browser and operating system information
  • Contact your system administrator

SMXiCore CRM User Manual - Last Updated: December 19, 2024 (Unsaved Changes & Error Reporting Features Added)
For technical support, contact your system administrator