@ubkinfotech/tecaher-erp

Professional React Native Teacher ERP module package with a centralized ERPProvider.

It provides reusable teacher ERP screens with internal API handling, production-style UI flows, and a single place to configure authentication and base URLs.

Included Modules

• AssignmentScreen
• AttendanceScreen
• LeaveRequestScreen
• MarksScreen
• MyAttendanceScreen
• NotesScreen
• NoticeBoardScreen
• NotificationScreen
• PromoteStudentScreen
• TimeTableScreen

Features

• Centralized API configuration with ERPProvider
• Supports authToken or async getAuthToken()
• Automatic Authorization header handling through the internal API client
• Real teacher ERP flows instead of JSON placeholder screens
• Internal pagination, refresh, and list management where applicable
• Optional support for calendar, image picker, document picker, PDF preview, and local file viewing

Installation

Install the package:

npm i @ubkinfotech/tecaher-erp

Install the required peer dependencies:

npm i @tanstack/react-query react-native-safe-area-context

Your app should already use compatible versions of:

• react >= 18
• react-native >= 0.75

Optional Native Prerequisites

Install these only if your selected modules need them:

npm i react-native-calendars
npm i react-native-document-picker
npm i react-native-image-picker
npm i react-native-image-viewing
npm i react-native-fs
npm i react-native-file-viewer
npm i react-native-pdf

Module Requirements

The current recommended usage is based on the live integration in src/screens/TestNpm/Testnpm.jsx.

| Module | Current Usage | Notes | Optional Native Packages | | --- | --- | --- | --- | | AssignmentScreen | sessionId | Required in current integration | react-native-document-picker, react-native-image-picker, react-native-image-viewing, react-native-fs, react-native-file-viewer, react-native-pdf | | AttendanceScreen | sessionId | Class and section are managed internally in the screen | react-native-calendars | | LeaveRequestScreen | none | Fully managed internally | react-native-document-picker, react-native-image-picker | | MarksScreen | sessionId | Required in current integration | none | | MyAttendanceScreen | staffId, sessionId | Required in current integration | none | | NotesScreen | sessionId | Required in current integration | react-native-document-picker, react-native-image-picker, react-native-image-viewing, react-native-fs, react-native-file-viewer, react-native-pdf | | NoticeBoardScreen | none | Fully managed internally | none | | NotificationScreen | none | Fully managed internally | none | | PromoteStudentScreen | none | Source class and section are selected inside the screen | none | | TimeTableScreen | staffId, sessionId | Teacher mode in current integration | none |

Provider Setup

With direct token

import React from 'react';
import {ERPProvider} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';
const API_DOWNLOAD_URL = 'https://example.com/uploads/';

export function ERPApp({
  authToken,
  children,
}: {
  authToken: string;
  children: React.ReactNode;
}) {
  return (
    <ERPProvider
      baseUrl={API_BASE_URL}
      fileBaseUrl={API_DOWNLOAD_URL}
      authToken={authToken}
    >
      {children}
    </ERPProvider>
  );
}

With async token getter

import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {ERPProvider} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';
const API_DOWNLOAD_URL = 'https://example.com/uploads/';

export function ERPApp({children}: {children: React.ReactNode}) {
  return (
    <ERPProvider
      baseUrl={API_BASE_URL}
      fileBaseUrl={API_DOWNLOAD_URL}
      getAuthToken={() => AsyncStorage.getItem('token')}
    >
      {children}
    </ERPProvider>
  );
}

ERPProvider Props

| Prop | Type | Required | Description | | --- | --- | --- | --- | | baseUrl | string | yes | Base API URL used by all ERP modules | | fileBaseUrl | string | no | Base file URL for attachments, images, and documents | | schoolCode | string | no | Optional school identifier/header context | | authToken | string \| null | no | Direct auth token | | getAuthToken | () => Promise<string \| null> | no | Async token getter | | refreshAuthToken | () => Promise<string \| null> | no | Optional token refresh handler | | headers | Record<string, string> | no | Additional request headers | | retry | {retries: number; delayMs: number} | no | Retry policy for network requests | | onError | (error) => void | no | Global API error callback | | onUnauthorized | (error) => void | no | Callback for unauthorized responses |

Recommended App Integration

This example matches the current Testnpm.jsx usage pattern.

import React, {useContext, useMemo, useState} from 'react';
import {View, Text} from 'react-native';
import {AuthContext} from '../context/AuthContext';
import {UserContext} from '../context/UserContext';
import {
  ERPProvider,
  AssignmentScreen,
  AttendanceScreen,
  LeaveRequestScreen,
  MarksScreen,
  MyAttendanceScreen,
  NotesScreen,
  NoticeBoardScreen,
  NotificationScreen,
  PromoteStudentScreen,
  TimeTableScreen,
} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';
const API_DOWNLOAD_URL = 'https://example.com/uploads/';

export function TeacherErpHost() {
  const {authToken} = useContext(AuthContext);
  const {user} = useContext(UserContext);
  const [selected, setSelected] = useState('Attendance');

  const sessionId = user?.session_id ?? 1;
  const staffId = user?.id ?? 1;

  const content = useMemo(() => {
    switch (selected) {
      case 'Assignment':
        return <AssignmentScreen sessionId={sessionId} />;
      case 'Attendance':
        return <AttendanceScreen sessionId={sessionId} />;
      case 'LeaveRequest':
        return <LeaveRequestScreen />;
      case 'Marks':
        return <MarksScreen sessionId={sessionId} />;
      case 'MyAttendance':
        return <MyAttendanceScreen staffId={staffId} sessionId={sessionId} />;
      case 'Notes':
        return <NotesScreen sessionId={sessionId} />;
      case 'Notice':
        return <NoticeBoardScreen />;
      case 'Notification':
        return <NotificationScreen />;
      case 'PromoteStudent':
        return <PromoteStudentScreen />;
      case 'TimeTable':
        return <TimeTableScreen staffId={staffId} sessionId={sessionId} />;
      default:
        return <Text>Pick a module</Text>;
    }
  }, [selected, sessionId, staffId]);

  return (
    <ERPProvider
      baseUrl={API_BASE_URL}
      fileBaseUrl={API_DOWNLOAD_URL}
      authToken={authToken}
    >
      <View style={{flex: 1}}>{content}</View>
    </ERPProvider>
  );
}

Exported Components

• ERPProvider
• useERP
• AssignmentScreen
• AttendanceScreen
• LeaveRequestScreen
• MarksScreen
• MyAttendanceScreen
• NotesScreen
• NoticeBoardScreen
• NotificationScreen
• PromoteStudentScreen
• TimeTableScreen
• LoadingState
• EmptyState
• ErrorState

Module Examples

AssignmentScreen

Use this for assignment listing, create, edit, submissions, and marks workflows.

import React from 'react';
import {ERPProvider, AssignmentScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';
const API_DOWNLOAD_URL = 'https://example.com/uploads/';

export function AssignmentExample({
  authToken,
  sessionId,
}: {
  authToken: string;
  sessionId: number;
}) {
  return (
    <ERPProvider
      baseUrl={API_BASE_URL}
      fileBaseUrl={API_DOWNLOAD_URL}
      authToken={authToken}
    >
      <AssignmentScreen sessionId={sessionId} />
    </ERPProvider>
  );
}

AttendanceScreen

Use this for teacher attendance take and view flow. In the current setup, only sessionId is passed from the host app.

import React from 'react';
import {ERPProvider, AttendanceScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';

export function AttendanceExample({
  authToken,
  sessionId,
}: {
  authToken: string;
  sessionId: number;
}) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <AttendanceScreen sessionId={sessionId} />
    </ERPProvider>
  );
}

LeaveRequestScreen

Use this for leave request list, status tabs, and apply leave flow.

import React from 'react';
import {ERPProvider, LeaveRequestScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';

export function LeaveRequestExample({authToken}: {authToken: string}) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <LeaveRequestScreen />
    </ERPProvider>
  );
}

MarksScreen

Use this for scholastic, co-scholastic, and exam remark entry flows.

import React from 'react';
import {ERPProvider, MarksScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';

export function MarksExample({
  authToken,
  sessionId,
}: {
  authToken: string;
  sessionId: number;
}) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <MarksScreen sessionId={sessionId} />
    </ERPProvider>
  );
}

MyAttendanceScreen

Use this for teacher attendance filters, summary cards, and daily report.

import React from 'react';
import {ERPProvider, MyAttendanceScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';

export function MyAttendanceExample({
  authToken,
  staffId,
  sessionId,
}: {
  authToken: string;
  staffId: number;
  sessionId: number;
}) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <MyAttendanceScreen staffId={staffId} sessionId={sessionId} />
    </ERPProvider>
  );
}

NotesScreen

Use this for note listing, details, create, edit, upload, image preview, and PDF/document preview flows.

import React from 'react';
import {ERPProvider, NotesScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';
const API_DOWNLOAD_URL = 'https://example.com/uploads/';

export function NotesExample({
  authToken,
  sessionId,
}: {
  authToken: string;
  sessionId: number;
}) {
  return (
    <ERPProvider
      baseUrl={API_BASE_URL}
      fileBaseUrl={API_DOWNLOAD_URL}
      authToken={authToken}
    >
      <NotesScreen sessionId={sessionId} />
    </ERPProvider>
  );
}

NoticeBoardScreen

Use this for notice board list and notice details.

import React from 'react';
import {ERPProvider, NoticeBoardScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';

export function NoticeBoardExample({authToken}: {authToken: string}) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <NoticeBoardScreen />
    </ERPProvider>
  );
}

NotificationScreen

Use this for notification listing with built-in pagination and refresh.

import React from 'react';
import {ERPProvider, NotificationScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';

export function NotificationExample({authToken}: {authToken: string}) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <NotificationScreen />
    </ERPProvider>
  );
}

PromoteStudentScreen

Use this for student search, destination selection, and promotion submission. In the current setup, class and section are selected inside the screen.

import React from 'react';
import {ERPProvider, PromoteStudentScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';

export function PromoteStudentExample({authToken}: {authToken: string}) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <PromoteStudentScreen />
    </ERPProvider>
  );
}

TimeTableScreen

The current host integration uses teacher mode with staffId and sessionId.

import React from 'react';
import {ERPProvider, TimeTableScreen} from '@ubkinfotech/tecaher-erp';

const API_BASE_URL = 'https://example.com/';

export function TeacherTimeTableExample({
  authToken,
  staffId,
  sessionId,
}: {
  authToken: string;
  staffId: number;
  sessionId: number;
}) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <TimeTableScreen staffId={staffId} sessionId={sessionId} />
    </ERPProvider>
  );
}

Notes

• The published package name is intentionally @ubkinfotech/tecaher-erp.
• fileBaseUrl is strongly recommended for modules that render attachments, images, and documents.
• NoticeBoardScreen, NotificationScreen, LeaveRequestScreen, and PromoteStudentScreen are currently used without extra module props in the host app.
• AssignmentScreen, AttendanceScreen, MarksScreen, MyAttendanceScreen, NotesScreen, and TimeTableScreen still use authenticated session or staff values in the current integration.

License

MIT