Employee Info Component

A reusable React component for displaying employee information with workflow path tracking.

Features

• Display employee details (name, ID, designation, division, manager)
• Workflow path tracking with approval status
• Configurable API endpoints
• Responsive design with Tailwind CSS
• Easy to integrate into any React project

Installation

npm install employee-info-component

or

yarn add employee-info-component

Usage

Basic Usage

import { EmployeeInfo } from 'employee-info-component';
import 'employee-info-component/dist/style.css';

function App() {
  return (
    <div>
      <EmployeeInfo />
    </div>
  );
}

export default App;

With Custom Props

import { EmployeeInfo } from 'employee-info-component';
import 'employee-info-component/dist/style.css';

function App() {
  const customEmployeeData = {
    Name: "John Doe",
    EmployeeID: "12345",
    MySingleID: "JD001",
    Designation: "Software Engineer",
    Division: "Engineering",
    ManagerName: "Jane Smith",
    Profilepath: "https://example.com/profile.jpg"
  };

  const customWorkflowData = [
    {
      id: 1,
      date: '25-Jun-2025',
      time: '10:30 PM',
      name: 'Manoj Kandan M',
      genId: '235011035',
      profile: 'Employee',
      comment: 'Lorem ipsum dolor sit amet...',
      status: 1, // 1 = Approved, 2 = Pending
      pic: 'https://example.com/avatar.jpg'
    }
  ];

  return (
    <div>
      <EmployeeInfo
        wfTitle="Approval Workflow"
        employeeData={customEmployeeData}
        workflowData={customWorkflowData}
        accountApiUrl="https://your-api.com"
        headerDetailsApiUrl="https://your-api.com/header-details"
        onEmployeeDataLoad={(data) => console.log('Employee data loaded:', data)}
        onWorkflowDataLoad={(data) => console.log('Workflow data loaded:', data)}
        className="custom-class"
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | wfTitle | string | "" | Title for the workflow section | | accountApiUrl | string | 'http://107.99.240.107:4008' | Base URL for account API | | headerDetailsApiUrl | string | 'http://appsapna//MasterServices/api/values/GetHeaderDetails' | URL for header details API | | workflowData | array | [] | Custom workflow data to display | | employeeData | object | null | Custom employee data to display | | onEmployeeDataLoad | function | undefined | Callback when employee data is loaded | | onWorkflowDataLoad | function | undefined | Callback when workflow data is loaded | | className | string | "" | Additional CSS classes to apply | | ...restProps | any | | Additional props to pass to the root element |

Styling

This component uses Tailwind CSS for styling. To ensure proper styling in your application:

1. Make sure you have Tailwind CSS configured in your project
2. Import the component's CSS file: import 'employee-info-component/dist/style.css';

With Tailwind CSS

If your project already uses Tailwind CSS, the component will automatically inherit your project's Tailwind configuration.

Without Tailwind CSS

If your project doesn't use Tailwind CSS, you can still use the component by importing the provided CSS file:

import 'employee-info-component/dist/style.css';

Requirements

• React 17.0.0 or higher
• React DOM 17.0.0 or higher

Development

To run the component in development mode:

npm run dev

To build the component for production:

npm run build

License

MIT

Author

Your Name