calibration-template-kit

A framework-friendly, fully customizable, and modular React package for instrument calibration workflows. Includes Template Designer, Interactive Data Entry Grid powered by HyperFormula, Live Certificate Preview, Approval Workflows, and Audit History tracking.

Key Features

• Calibration Template Designer: Create, customize, and duplicate reusable calibration templates with custom tolerance rules, environmental defaults, and custom columns.
• Interactive Data Entry Grid: High-density virtualized data grid (@tanstack/react-virtual) supporting Excel-like formula evaluations (=A - B, =AVERAGE(B, C)), column reordering, custom status rules, and decimal precision control.
• Formula Engine: Standalone calculation engine powered by HyperFormula for real-time error evaluation, percentage error, bias, standard deviation, and custom expressions.
• Live Certificate Preview: Real-time NABL/ISO-17025 compliant HTML certificate preview with ULR number gate.
• Complete Workflow Components:
  • CalibrationWizard: Multi-step calibration entry wizard.
  • CalibrationList: Calibration records, stats, and draft management.
  • CalibrationApproval: Multi-tier manager approval & rejection rework workflow.
  • CalibrationHistoryView: Historical calibration records & audit trail log viewer.
  • TemplateList: Reusable template catalog with search and quick actions.
  • CalibrationProgressChart: ApexCharts-powered weekly/daily progress tracking.
• Framework & Dependency Agnostic: Decoupled from project-specific auth, HTTP client, router, or UI libraries through a single CalibrationProvider context.

Installation

npm install calibration-template-kit

Peer Dependencies

Ensure your project has the required peer dependencies installed:

npm install react react-dom lucide-react @tanstack/react-virtual hyperformula date-fns class-variance-authority clsx tailwind-merge

(Optional) For charts and printing support:

npm install react-apexcharts apexcharts react-to-print

Quick Start & Setup

Wrap your application (or calibration section) with the <CalibrationProvider>:

import React from "react";
import { CalibrationProvider, TemplateList, TemplateDesigner } from "calibration-template-kit";
import axios from "axios";

// 1. Create an API adapter matching your project's HTTP client
const apiClient = {
  get: (url: string, config?: any) => axios.get(url, config),
  post: (url: string, data?: any, config?: any) => axios.post(url, data, config),
  put: (url: string, data?: any, config?: any) => axios.put(url, data, config),
  delete: (url: string, config?: any) => axios.delete(url, config),
};

// 2. Configure user and navigation callbacks
const config = {
  user: {
    id: "usr_123",
    name: "John Doe",
    email: "[email protected]",
    companyId: "comp_456",
    role: "Quality Manager",
  },
  apiClient,
  toast: {
    success: (msg) => console.log("[SUCCESS]", msg),
    error: (msg) => console.error("[ERROR]", msg),
  },
  onNavigate: (path) => {
    window.location.href = path; // or navigate(path) from react-router-dom
  },
};

export default function App() {
  return (
    <CalibrationProvider config={config}>
      <TemplateList />
    </CalibrationProvider>
  );
}

Public Components Reference

1. TemplateList

Catalog of reusable calibration templates categorized by instrument type.

import { TemplateList } from "calibration-template-kit";

<TemplateList
  onNewTemplate={() => navigate("/templates/new")}
  onEditTemplate={(template) => navigate(`/templates/edit/${template.id}`)}
/>

2. TemplateDesigner

Full-featured template builder for designing custom point layouts, formula columns, and acceptance criteria.

import { TemplateDesigner } from "calibration-template-kit";

<TemplateDesigner
  templateId="tpl_789" // omit for new template
  onSaveSuccess={(template) => console.log("Saved", template)}
  onBack={() => navigate("/templates")}
/>

3. CalibrationWizard

5-Step calibration wizard for performing instrument calibrations, applying templates, generating ULR numbers, and producing certificates.

import { CalibrationWizard } from "calibration-template-kit";

<CalibrationWizard
  instrumentId="inst_001"
  onComplete={(record) => console.log("Completed calibration", record)}
  onCancel={() => navigate("/calibrations")}
/>

4. CalibrationDataGrid

Interactive data entry grid component usable standalone in custom forms.

import { CalibrationDataGrid, CALIBRATION_TYPES } from "calibration-template-kit";

<CalibrationDataGrid
  typeConfig={CALIBRATION_TYPES[0]} // Pressure gauge
  points={points}
  onPointsChange={setPoints}
  unit="Bar"
  onUnitChange={setUnit}
  tolerance={0.01}
  onToleranceChange={setTolerance}
/>

5. CalibrationList

List of past calibrations, statistics KPIs, and saved drafts.

import { CalibrationList } from "calibration-template-kit";

<CalibrationList
  onNewCalibration={() => navigate("/calibration/new")}
  onEditCalibration={(id) => navigate(`/calibration/edit/${id}`)}
  onViewHistory={(instId) => navigate(`/history/${instId}`)}
/>

6. CalibrationApproval

Quality Manager review screen for approving or returning calibrations for rework.

import { CalibrationApproval } from "calibration-template-kit";

<CalibrationApproval
  onEditCalibration={(id) => navigate(`/calibration/edit/${id}`)}
/>

7. CalibrationHistoryView

Historical calibration records, certificate previewer, and audit log history.

import { CalibrationHistoryView } from "calibration-template-kit";

<CalibrationHistoryView
  instrumentId="inst_001"
  onBack={() => navigate(-1)}
/>

Configuration API (CalibrationConfig)

| Property | Type | Description | |---|---|---| | user | CalibrationUser | Logged-in user information (id, name, companyId, role) | | apiClient | ApiAdapter | Axios / Fetch wrapper implementing .get(), .post(), .put(), .delete() | | toast | ToastAdapter | (Optional) Custom notification adapter (.success(), .error()) | | apiBasePaths | object | (Optional) Override API paths (calibrations, templates, settings, users, instruments) | | onNavigate | (path: string) => void | (Optional) Navigation router callback | | dateFormat | string | (Optional) Date display format (default: "dd-MMM-yyyy") |

License

MIT © GaugeMaster