@nice2dev/ui-erp

Enterprise Resource Planning components for Nice2Dev UI library.

Installation

npm install @nice2dev/ui-erp
# or
pnpm add @nice2dev/ui-erp

Components

NiceGanttChart

Interactive Gantt chart for project management with task dependencies, progress tracking, and timeline visualization.

import { NiceGanttChart } from '@nice2dev/ui-erp';
import '@nice2dev/ui-erp/style.css';

const project = {
  id: 'project-1',
  name: 'Website Redesign',
  startDate: new Date('2024-01-01'),
  endDate: new Date('2024-03-31'),
  tasks: [
    {
      id: 'task-1',
      name: 'Requirements Gathering',
      start: new Date('2024-01-01'),
      end: new Date('2024-01-14'),
      progress: 100,
      status: 'completed',
    },
    {
      id: 'task-2',
      name: 'UI/UX Design',
      start: new Date('2024-01-15'),
      end: new Date('2024-02-15'),
      progress: 75,
      status: 'in-progress',
      dependencies: [{ taskId: 'task-1', type: 'finish-to-start' }],
    },
    {
      id: 'task-3',
      name: 'Development',
      start: new Date('2024-02-01'),
      end: new Date('2024-03-15'),
      progress: 25,
      status: 'in-progress',
      parentId: 'task-2',
    },
  ],
};

function ProjectTimeline() {
  return (
    <NiceGanttChart
      project={project}
      viewConfig={{
        timeUnit: 'week',
        showDependencies: true,
        showProgress: true,
        todayMarker: true,
      }}
      onTaskUpdate={(task) => console.log('Task updated:', task)}
      onTaskClick={(task) => console.log('Task clicked:', task)}
    />
  );
}

NiceResourceAllocation

Resource capacity planning grid with utilization tracking and conflict detection.

import { NiceResourceAllocation } from '@nice2dev/ui-erp';
import '@nice2dev/ui-erp/style.css';

const resources = [
  {
    id: 'res-1',
    name: 'John Developer',
    type: 'human',
    department: 'Engineering',
    maxCapacity: 8,
    availability: {
      workingDays: [1, 2, 3, 4, 5],
      workingHours: { start: '09:00', end: '17:00' },
    },
  },
  {
    id: 'res-2',
    name: 'Conference Room A',
    type: 'room',
    maxCapacity: 10,
    availability: {
      workingDays: [1, 2, 3, 4, 5],
      workingHours: { start: '08:00', end: '20:00' },
    },
  },
];

const allocations = [
  {
    id: 'alloc-1',
    resourceId: 'res-1',
    projectId: 'project-1',
    start: new Date('2024-01-15'),
    end: new Date('2024-01-31'),
    hoursPerDay: 6,
    status: 'confirmed',
  },
];

function ResourcePlanning() {
  return (
    <NiceResourceAllocation
      resources={resources}
      allocations={allocations}
      dateRange={{
        start: new Date('2024-01-01'),
        end: new Date('2024-03-31'),
      }}
      viewConfig={{
        timeUnit: 'week',
        showUtilization: true,
        showConflicts: true,
      }}
      onAllocationCreate={(alloc) => console.log('New allocation:', alloc)}
      onAllocationUpdate={(alloc) => console.log('Updated:', alloc)}
    />
  );
}

NiceInventoryManager

Inventory management with multiple views, transactions, and reorder alerts.

import { NiceInventoryManager } from '@nice2dev/ui-erp';
import '@nice2dev/ui-erp/style.css';

const items = [
  {
    id: 'item-1',
    sku: 'WIDGET-001',
    name: 'Premium Widget',
    category: 'Widgets',
    unit: 'pcs',
    quantity: 150,
    reorderLevel: 50,
    reorderQuantity: 200,
    cost: { amount: 25.0, currency: { code: 'USD', symbol: '$', decimalPlaces: 2 } },
    status: 'in-stock',
  },
  {
    id: 'item-2',
    sku: 'GADGET-002',
    name: 'Basic Gadget',
    category: 'Gadgets',
    unit: 'pcs',
    quantity: 30,
    reorderLevel: 50,
    reorderQuantity: 100,
    cost: { amount: 15.0, currency: { code: 'USD', symbol: '$', decimalPlaces: 2 } },
    status: 'low-stock',
  },
];

function InventoryDashboard() {
  return (
    <NiceInventoryManager
      items={items}
      viewConfig={{
        view: 'grid',
        showImages: true,
        sortBy: 'name',
      }}
      onItemUpdate={(item) => console.log('Item updated:', item)}
      onTransactionCreate={(tx) => console.log('Transaction:', tx)}
      onItemClick={(item) => console.log('View item:', item)}
    />
  );
}

Features

Gantt Chart

• Drag-and-drop task scheduling
• Task dependencies (finish-to-start, start-to-start, etc.)
• Progress tracking and visualization
• Collapsible task hierarchy
• Multiple time units (day, week, month)
• Today marker and critical path
• Milestones support
• Baseline comparison

Resource Allocation

• Visual capacity planning
• Utilization heatmap
• Conflict detection and alerts
• Multiple resource types
• Drag-to-allocate functionality
• Department grouping
• Working hours configuration

Inventory Management

• Grid, list, and kanban views
• Real-time stock tracking
• Low stock alerts
• Transaction history
• Reorder management
• Barcode/SKU support
• Multi-location tracking
• Category filtering

API Reference

See the TypeScript definitions for complete API documentation.

License

MIT