SMSScheduledTable

A ready-to-use table component for displaying scheduled notifications with delivery status and content.

Usage

Display scheduled notifications in a table with filtering and sorting capabilities.

import { useSGERP } from 'sgerp-frontend-lib';
import { SMSScheduledTable } from '@/components/sgerp/tables/smsscheduled-table';

function MyComponent() {
  const api = useSGERP();

  return (
    <SMSScheduledTable
      collection={api?.collections.smsscheduled ?? null}
      onRowClick={(row) => console.log('Clicked:', row)}
    />
  );
}

Features

Columns: ID, Scheduled At, Status, Recipient, Recipient Type, Template Type, Delivery Type, Content (truncated), Error Count, Created timestamp
Filters: Status (text), Recipient Type (text), Template Type (text), Project ID (number)
Sorting: ID, Scheduled At, Status, Recipient, Recipient Type, Template Type, Delivery Type, Error Count, Created timestamp
Default Sort: -scheduled_at (most recently scheduled first)
Page Size: 20 items per page

Props

Prop	Type	Required	Description
`collection`	`SMSScheduledCollection \| null`	Yes	The SMS scheduled collection to display
`columns`	`ColumnDef<SMSScheduled>[]`	No	Override default columns
`filters`	`FilterDef<SMSScheduled>[]`	No	Override default filters
`initialOrderBy`	`string`	No	Override default sort order
`pageSize`	`number`	No	Override page size
`onRowClick`	`(row: SMSScheduled) => void`	No	Callback when a row is clicked

Column Details

Scheduled At

Formatted as localized date/time string showing when the notification is scheduled to be sent.

Status

Current status of the scheduled notification:

cancelled - Notification was cancelled
scheduled - Waiting to be sent
sending - Currently being sent
sent - Successfully delivered

Recipient

The recipient's contact information (phone number, device token, or identifier).

Recipient Type

Type of recipient:

delivery_client - Delivery client
delivery_group - Delivery group
organization - Organization
passenger - Individual passenger
passenger_group - Group of passengers

Template Type

Type of notification template:

delivery_on_the_way - Delivery is on the way
failed_to_board - Failed to board notification
found_a_ride - Ride found notification
offer_acceptance - Offer accepted
vehicle_arrival - Vehicle has arrived
vehicle_eta_pickup_1 to vehicle_eta_pickup_10 - Vehicle ETA for pickup (1-10 minutes)
vehicle_eta_dropoff_1 to vehicle_eta_dropoff_10 - Vehicle ETA for dropoff (1-10 minutes)

Delivery Type (message_delivery_type)

Method of message delivery:

push - Push notification
sms - SMS message

Content

Message content truncated to 50 characters with ellipsis if longer.

Error Count

Number of sending errors encountered for this scheduled notification.

Filtering

Status: Filter by status (cancelled, scheduled, sending, sent)
Recipient Type: Filter by recipient type (delivery_client, delivery_group, organization, passenger, passenger_group)
Template Type: Filter by template type (see template types above)
Project ID: Numeric filter for specific project

Customization

Custom Columns

You can customize columns by importing the defaults and modifying them:

import { SMSScheduledTable, defaultSMSScheduledColumns } from '@/components/sgerp/tables/smsscheduled-table';

const customColumns = [
  ...defaultSMSScheduledColumns.slice(0, 5), // First 5 columns
  {
    key: "sending_error",
    label: "Error Details",
    render: (value) => value || 'N/A'
  },
];

<SMSScheduledTable
  collection={api?.collections.smsscheduled ?? null}
  columns={customColumns}
/>

Notifications Table

Live Example