Features

Enterprise-Ready Architecture

• Modular Components — 50+ reusable, customizable React components
• Modern Build System — Vite-powered for lightning-fast development and builds
• Production Optimized — Tree-shaking, code splitting, and performance optimizations

Authentication & Security

• OAuth2/OpenID Connect Integration — Secure authentication with industry standards
• Session Management — Configurable session timeout and idle detection
• Permission-Based Access — Role-based component and route protection
• Secure Token Handling — Automatic token refresh and validation

Multi-Tenant SaaS Features

• Tenant Management — Complete tenant lifecycle management
• Subscription Plans — Flexible plan configuration and billing cycles
• Feature Toggles — Dynamic feature enablement per tenant
• Billing & Invoicing — Integrated payment and invoice management

Super Admin Control Plane

• System Configuration — Admin settings for observability URLs, pagination, and system parameters
• Plan Management — Create, update, and manage subscription plans with status tracking
• Feature Management — Upload and configure feature sets via CSV, manage feature flags
• Cluster Management — Basic cluster configuration for deployment environments
• Billing Management — Invoice generation, payment tracking, and billing cycle configuration
• Tenant Management — Complete tenant lifecycle with provisioning and status monitoring
• Lead Management — Lead tracking with auto-close configuration and conversion workflows
• Permission Control — Role-based access control with 40+ granular permissions
• Dashboard Analytics — Real-time tenant counts, plan statistics, and visual charts

Customization & Theming

• Dynamic Theming — Single-file color configuration for complete rebranding
• White-Label Ready — Easy logo, branding, and styling customization
• Responsive Design — Mobile-first approach with Material-UI components
• Dark/Light Mode — Built-in theme switching capabilities

Business Intelligence

• Dashboard Analytics — Real-time metrics and KPI visualization
• Data Tables — Advanced filtering, sorting, and pagination
• Charts & Graphs — Interactive data visualization with Recharts
• Audit Logging — Comprehensive activity tracking and observability

Developer Experience

• Hot Reload — Instant development feedback with Vite
• Comprehensive Testing — Vitest, Testing Library, and Cypress integration
• Code Quality — ESLint, Prettier, and Husky pre-commit hooks
• Documentation — Extensive component documentation and examples

Preview

Here's what the dashboard looks like:

API Dependencies

⚠️ Critical: This application cannot function without the following backend APIs and services. Ensure all required services are properly configured before deployment.

Required Backend Services

API Endpoints Expected

The application expects the following API endpoints to be available:

Authentication Endpoints

• POST /auth/login - User authentication
• POST /auth/refresh - Token refresh
• POST /auth/logout - User logout

Tenant Management Endpoints

• GET /tenants - List tenants
• POST /tenants - Create tenant
• PUT /tenants/:id - Update tenant
• DELETE /tenants/:id - Delete tenant

Plan Management Endpoints

• GET /plans - List subscription plans
• POST /plans - Create plan
• PUT /plans/:id - Update plan
• GET /plan-items - List plan items
• POST /plan-items - Create plan item

Feature Management Endpoints

• GET /features - List features
• POST /features - Upload features via CSV
• PUT /features/:id - Update feature

Billing & Payment Endpoints

• GET /invoices - List invoices
• POST /invoices - Generate invoice
• GET /payments - List payments
• POST /payments - Process payment

System Configuration Endpoints

• GET /settings - Get system settings
• PUT /settings - Update system settings
• GET /clusters - List clusters
• POST /clusters - Create cluster

API Response Format

All APIs should return responses in the following format:

// Success Response
{
  "data": any,
  "message": string,
  "status": "success"
}

// Error Response
{
  "error": string,
  "message": string,
  "status": "error"
}

Authentication Headers

All API requests require the following headers:

Authorization: Bearer <access_token>
Content-Type: application/json

Directory Structure

src/
├── Components/           # Reusable UI components
│   ├── AppBar/          # Application header
│   ├── Button/          # Button variants
│   ├── Table/           # Data tables with advanced features
│   ├── Forms/           # Form components and validation
│   ├── SideNav/         # Navigation components
│   └── ...              # 40+ more components
├── Pages/               # Application pages
│   ├── Dashboard/       # Analytics dashboard
│   ├── Tenants/         # Tenant management
│   ├── Configuration/   # Super Admin Control Plane
│   │   ├── Plans/       # Plan management
│   │   ├── PlanItems/   # Plan items configuration
│   │   ├── Features/    # Feature management
│   │   ├── Clusters/    # Cluster management
│   │   ├── Billing/     # Billing configuration
│   │   ├── Settings/    # System settings
│   │   └── Terms/       # Terms & conditions
│   ├── Leads/           # Lead management
│   ├── Payments/        # Billing & invoicing
│   └── ...              # Feature-specific pages
├── Providers/           # React context providers
│   ├── theme/           # Theme configuration
│   └── ...              # Global state providers
├── Hooks/               # Custom React hooks
├── redux/               # State management
├── Constants/           # Application constants
└── Helpers/             # Utility functions

Installation

Prerequisites

• Node.js 16.0 or higher
• npm 8.0 or higher
• OAuth2/OpenID Connect Provider (e.g., Keycloak, Auth0, Azure AD, etc.)
• Backend APIs (see API Dependencies section)

Environment Setup

1. Fork the repository:

• Go to https://github.com/sourcefuse/arc-react-sass-ui and click "Fork" to create your own copy.

2. Clone your fork:

git clone https://github.com/<your-username>/arc-react-sass-ui.git
cd arc-react-sass-ui

3. Install dependencies:

npm install

4. Configure environment variables:

cp .env.example .env

5. Start the development server:

npm start

Visit http://localhost:3000 to see the application in action.

Configuration

Environment Variables

Create a .env file in the root directory with the following variables:

# Core Configuration
CLIENT_ID=your-oauth-client-id
APP_API_BASE_URL=https://api.yourdomain.com
AUTH_API_BASE_URL=https://auth.yourdomain.com
TENANT_API_BASE_URL=https://tenant-api.yourdomain.com
AUDIT_API_BASE_URL=https://audit-api.yourdomain.com

# Session Management
ENABLE_SESSION_TIMEOUT=true
EXPIRY_TIME_IN_MINUTE=30
PROMPT_TIME_BEFORE_IDLE_IN_MINUTE=5
STORAGE_SESSION_TIME_KEY=sessionExpiry

# Observability
GRAFANA_URL=https://grafana.yourdomain.com
OBSERVABILITY_DOMAIN=your-app-domain

# UI & Branding
APP_NAME=Your SaaS Application
APP_DESCRIPTION=Your application description

# Optional Configuration
DEFAULT_TIER_ID=default-tier
HASH_SECRET_KEY=your-secret-key
ENABLE_HASH_SECRET=true

Configuration Reference