@easyteam/web-ui

Easyteam Embedded React SDK

The workforce layer for vertical SaaS — complete time & attendance, shift scheduling, and workforce management embedded seamlessly in React web applications.

---

Overview

The Easyteam Embedded React SDK enables vertical SaaS platforms, workforce applications, and frontline-first products to embed production-grade time tracking, attendance, shift scheduling, labor policies, compliance, and workforce analytics directly inside their web applications.

This SDK provides React components built with Chakra UI that integrate seamlessly into your web application, giving you full control over the user experience while leveraging Easyteam's complete workforce management functionality.

Note: For most integrations, we strongly recommend using @easyteam/launcher for iframe-based embedding - it's widely supported, much easier to maintain, and is the best approach in nearly all cases. Direct React integration with this package is only needed in very rare situations where you must build a specific custom screen that cannot be achieved via the launcher.

This SDK is designed for scenarios like:

• Retail and hospitality workforce web applications
• Vertical SaaS platforms integrating workforce modules
• Point-of-sale (POS) and web-based workforce management systems
• Companies embedding time and attendance tracking in browser-based workflows

It includes React components, APIs, hooks, context providers, and secure authentication, giving developers everything they need to launch a complete workforce management layer in their web applications.

Key Features

Full Time & Attendance Engine

Time clock, time and attendance tracking, break management, compliance monitoring, timesheets, and time corrections.

Shift Scheduling Infrastructure

Manage weekly rosters, assigned shifts, open shifts, multi-location setups, and workforce availability.

Workforce Data Layer

Employee management, roles, permissions, staff data, and eligibility logic.

Frontline-Ready Components

Optimized user interfaces for teams on-the-go and web-based workflows.

Built for Vertical SaaS

Multi-tenant architecture by design, deeply configurable for different business needs.

---

Installation

npm install @easyteam/web-ui
# or
yarn add @easyteam/web-ui

Prerequisites

• Chakra UI (peer dependency)
• @emotion/react and @emotion/styled (peer dependencies)
• framer-motion (peer dependency)
• A valid Easyteam JWT token for authentication (see Authentication docs)

---

Usage

Basic Setup

Wrap your React application with the EasyTeamProvider to enable all workforce management features:

import { EasyTeamProvider } from "@easyteam/web-ui";

function App() {
  const employees = [/* your employees data */];
  const token = "your-jwt-token"; // See Authentication docs

  return (
    <EasyTeamProvider 
      token={token}
      employees={employees}
    >
      {/* Your app content */}
    </EasyTeamProvider>
  );
}

Using Components

Import and use individual components throughout your application:

import { EmployeesTimesheet } from "@easyteam/web-ui";

function TimesheetPage() {
  const handleEmployeeClick = (
    employeeId: string,
    startDate: Date,
    endDate: Date
  ) => {
    // Handle navigation to employee timesheet
  };

  return (
    <EmployeesTimesheet 
      onEmployeeClick={handleEmployeeClick}
      onEvent={(event) => console.log(event)}
    />
  );
}

See the documentation for a full list of supported components and parameters.

---

What's Included

This package provides:

• React Components: Pre-built UI components built with Chakra UI for time tracking, scheduling, and workforce management
• Context Provider: EasyTeamProvider for state management and API access
• React Hooks: Custom hooks for data fetching and business logic
• Type Definitions: Full TypeScript support with exported types and interfaces
• API Clients: Auto-generated TypeScript clients from OpenAPI specifications

---

Documentation

Full documentation - Web SDK Integration

---

Development

# Install dependencies
yarn install

# Build the package
yarn build

# Watch mode for development
yarn dev

---

License

This SDK and all associated source code are proprietary to Easyteam.

Use of this software is permitted only by current Easyteam customers under the terms of their signed Easyteam Service Agreement. No other use, copying, modification, distribution, or sublicensing is allowed without prior written permission from Easyteam.

If you are not an Easyteam customer with a valid agreement, you are not licensed to use this software.