@bernierllc/scheduler-admin-ui

Complete admin interface combining all scheduling UI components with role-based access control.

Features

• Unified Dashboard: Complete overview of all scheduling activities
• Content Management: Full content lifecycle management with integrated editor
• Schedule Calendar: Interactive schedule visualization and editing
• Publishing Control: Multi-platform publishing management
• Role-Based Access: Fine-grained permission system
• Real-Time Updates: Live dashboard updates via NeverHub
• Responsive Design: Mobile-friendly interface with Tamagui

Installation

npm install @bernierllc/scheduler-admin-ui

Dependencies

This package integrates several BernierLLC components:

• @bernierllc/content-editor-ui - Content creation and editing
• @bernierllc/schedule-calendar-ui - Schedule visualization
• @bernierllc/workflow-ui - Workflow management
• @bernierllc/content-scheduler-suite - Complete scheduling functionality
• @bernierllc/auth-service - Authentication and authorization
• @bernierllc/neverhub-adapter - Real-time updates

Usage

Basic Setup

import { SchedulerAdminApp } from '@bernierllc/scheduler-admin-ui';

const user = {
  id: '123',
  email: '[email protected]',
  name: 'Admin User',
  role: 'admin',
  permissions: [
    'content.create',
    'content.edit',
    'content.publish',
    'schedule.create',
    'system.configure',
  ],
};

function App() {
  return (
    <SchedulerAdminApp
      user={user}
      theme="auto"
      onError={(error) => console.error('App error:', error)}
    />
  );
}

With Custom Configuration

import { SchedulerAdminApp } from '@bernierllc/scheduler-admin-ui';

const config = {
  branding: {
    name: 'My Content Scheduler',
    logo: '/logo.png',
    colors: {
      primary: '#3b82f6',
      secondary: '#8b5cf6',
    },
  },
  features: {
    contentEditor: true,
    scheduleCalendar: true,
    workflowManagement: true,
    userManagement: true,
    analytics: true,
  },
  platforms: [
    { id: 'twitter', name: 'Twitter', type: 'social', enabled: true },
    { id: 'linkedin', name: 'LinkedIn', type: 'social', enabled: true },
  ],
};

<SchedulerAdminApp user={user} config={config} theme="dark" />;

Using Individual Components

import { Dashboard, useAuth, useDashboard } from '@bernierllc/scheduler-admin-ui';

function MyDashboard() {
  const { user } = useAuth();
  const { metrics, activities, isLoading } = useDashboard({
    refreshInterval: 30000, // Refresh every 30 seconds
  });

  if (isLoading) return <div>Loading...</div>;

  return (
    <Dashboard
      user={user}
      customWidgets={[
        { id: 'custom-widget', type: 'chart', title: 'Custom Analytics' },
      ]}
    />
  );
}

Permission-Based Rendering

import { usePermissions } from '@bernierllc/scheduler-admin-ui';

function MyComponent() {
  const {
    canCreateContent,
    canPublishContent,
    checkPermission,
  } = usePermissions();

  return (
    <div>
      {canCreateContent && <button>Create Content</button>}
      {canPublishContent && <button>Publish</button>}
      {checkPermission('system.configure') && <button>Settings</button>}
    </div>
  );
}

Custom Routes

import { SchedulerAdminApp } from '@bernierllc/scheduler-admin-ui';

function CustomAnalytics() {
  return <div>Custom Analytics Page</div>;
}

const customRoutes = [
  {
    path: '/analytics',
    element: CustomAnalytics,
    protected: true,
    requiredPermission: 'system.configure',
  },
];

<SchedulerAdminApp user={user} customRoutes={customRoutes} />;

API Reference

SchedulerAdminApp

Main application component that provides the complete admin interface.

Props:

• user: AuthenticatedUser - The authenticated user object
• config?: AdminConfig - Optional configuration for branding and features
• theme?: 'light' | 'dark' | 'auto' - Theme mode (default: 'auto')
• onError?: (error: Error) => void - Error handler callback
• customRoutes?: CustomRoute[] - Custom route definitions

Hooks

useAuth()

Access authentication state and methods.

const { user, isAuthenticated, hasPermission, login, logout } = useAuth();

usePermissions()

Check user permissions.

const {
  canCreateContent,
  canEditContent,
  canPublishContent,
  checkPermission,
} = usePermissions();

useDashboard(options)

Fetch dashboard data with automatic refresh.

const { metrics, activities, isLoading, error, refresh } = useDashboard({
  refreshInterval: 30000,
});

useNavigation()

Access navigation state and methods.

const { navigationItems, currentPath, isActive, navigateTo } = useNavigation();

Permission System

The application supports fine-grained permissions:

• content.create - Create new content
• content.edit - Edit existing content
• content.delete - Delete content
• content.publish - Publish content
• schedule.create - Create schedules
• schedule.edit - Edit schedules
• schedule.delete - Delete schedules
• workflow.approve - Approve workflow transitions
• workflow.reject - Reject workflow transitions
• system.configure - Configure system settings
• user.manage - Manage users and roles

User Roles

Predefined roles with default permissions:

• admin: Full system access
• editor: Content creation and editing
• publisher: Content publishing and scheduling
• viewer: Read-only access

Theme Customization

The application uses Tamagui for theming. Customize themes in your configuration:

const config = {
  branding: {
    colors: {
      primary: '#3b82f6',
      secondary: '#8b5cf6',
    },
  },
};

Integration Examples

With NeverHub

import { NeverHubAdapter } from '@bernierllc/neverhub-adapter';

const neverhub = new NeverHubAdapter();
await neverhub.register({
  type: 'scheduler-admin',
  version: '1.0.0',
});

// Real-time updates will automatically be reflected in the dashboard

With Content Scheduler Suite

import { ContentSchedulerSuite } from '@bernierllc/content-scheduler-suite';

const scheduler = new ContentSchedulerSuite({
  platforms: ['twitter', 'linkedin'],
});

await scheduler.scheduleContent({
  contentId: '123',
  scheduledAt: new Date('2025-12-10'),
  platforms: ['twitter'],
});

Testing

Run tests:

npm test

Run tests with coverage:

npm run test:coverage

Development

Build the package:

npm run build

Run linting:

npm run lint

License

Copyright (c) 2025 Bernier LLC. Licensed for use within the scope of the delivered project.

Support

For issues and questions, please contact Bernier LLC or open an issue in the repository.