@promptbook/cli 0.113.0-9 → 0.114.0-1

package/apps/agents-server/src/app/admin/login-methods/shibboleth/ShibbolethSortableTables.tsx

@@ -0,0 +1,361 @@
+'use client';
+
+import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '@/src/utils/localization/formatServerLanguageHumanReadableDate';
+import type { PublicUser } from '@/src/utils/publicUser';
+import type {
+    ShibbolethAuthenticationAttemptRow,
+    ShibbolethUserIdentityRow,
+} from '@/src/utils/shibbolethAuthentication';
+import Link from 'next/link';
+import { useCallback, useMemo } from 'react';
+import { AdminSortableTableHeaderCell } from '../../_components/AdminSortableTableHeaderCell';
+import { useAdminTableSorting, type AdminTableSortOrder } from '../../_components/adminTableSorting';
+
+/**
+ * Sortable fields in the Shibboleth authentication attempts table.
+ *
+ * @private internal type of <ShibbolethSortableTables/>
+ */
+type ShibbolethAuthenticationAttemptSortField =
+    | 'createdAt'
+    | 'status'
+    | 'stage'
+    | 'email'
+    | 'displayName'
+    | 'errorMessage';
+
+/**
+ * Sortable fields in the Shibboleth linked users table.
+ *
+ * @private internal type of <ShibbolethSortableTables/>
+ */
+type ShibbolethUserSortField =
+    | 'username'
+    | 'email'
+    | 'displayName'
+    | 'institutionalId'
+    | 'loginCount'
+    | 'lastLoggedInAt';
+
+/**
+ * Props for Shibboleth dashboard sortable tables.
+ *
+ * @private internal type of <ShibbolethLoginMethodPage/>
+ */
+type ShibbolethSortableTablesProps = {
+    readonly attempts: ReadonlyArray<ShibbolethAuthenticationAttemptRow>;
+    readonly identities: ReadonlyArray<ShibbolethUserIdentityRow>;
+    readonly language: ServerLanguageCode;
+    readonly users: ReadonlyArray<PublicUser>;
+};
+
+/**
+ * Renders sortable Shibboleth dashboard tables.
+ *
+ * @private internal component of <ShibbolethLoginMethodPage/>
+ */
+export function ShibbolethSortableTables({
+    attempts,
+    identities,
+    language,
+    users,
+}: ShibbolethSortableTablesProps) {
+    const usersById = useMemo(() => new Map(users.map((user) => [user.id, user])), [users]);
+    const attemptSorting = useAdminTableSorting<
+        ShibbolethAuthenticationAttemptRow,
+        ShibbolethAuthenticationAttemptSortField
+    >({
+        rows: attempts,
+        defaultSortBy: 'createdAt',
+        defaultSortOrder: 'desc',
+        resolveDefaultSortOrder: resolveShibbolethAuthenticationAttemptDefaultSortOrder,
+        resolveSortValue: resolveShibbolethAuthenticationAttemptSortValue,
+    });
+    const resolveUserSortValue = useCallback(
+        (identity: ShibbolethUserIdentityRow, sortBy: ShibbolethUserSortField) =>
+            resolveShibbolethUserSortValue(identity, sortBy, usersById),
+        [usersById],
+    );
+    const userSorting = useAdminTableSorting<ShibbolethUserIdentityRow, ShibbolethUserSortField>({
+        rows: identities,
+        defaultSortBy: 'lastLoggedInAt',
+        defaultSortOrder: 'desc',
+        resolveDefaultSortOrder: resolveShibbolethUserDefaultSortOrder,
+        resolveSortValue: resolveUserSortValue,
+    });
+
+    return (
+        <>
+            <section className="rounded-md border border-gray-200 bg-white p-5">
+                <h2 className="text-lg font-semibold text-gray-950">Authentication Attempts</h2>
+                <div className="mt-4 overflow-x-auto">
+                    <table className="min-w-full divide-y divide-gray-200 text-sm">
+                        <thead>
+                            <tr className="text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="time"
+                                    sortBy="createdAt"
+                                    activeSortBy={attemptSorting.sortBy}
+                                    sortOrder={attemptSorting.sortOrder}
+                                    onSortChange={attemptSorting.handleSortChange}
+                                >
+                                    Time
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="status"
+                                    sortBy="status"
+                                    activeSortBy={attemptSorting.sortBy}
+                                    sortOrder={attemptSorting.sortOrder}
+                                    onSortChange={attemptSorting.handleSortChange}
+                                >
+                                    Status
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="stage"
+                                    sortBy="stage"
+                                    activeSortBy={attemptSorting.sortBy}
+                                    sortOrder={attemptSorting.sortOrder}
+                                    onSortChange={attemptSorting.handleSortChange}
+                                >
+                                    Stage
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="email"
+                                    sortBy="email"
+                                    activeSortBy={attemptSorting.sortBy}
+                                    sortOrder={attemptSorting.sortOrder}
+                                    onSortChange={attemptSorting.handleSortChange}
+                                >
+                                    Email
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="name"
+                                    sortBy="displayName"
+                                    activeSortBy={attemptSorting.sortBy}
+                                    sortOrder={attemptSorting.sortOrder}
+                                    onSortChange={attemptSorting.handleSortChange}
+                                >
+                                    Name
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="error"
+                                    sortBy="errorMessage"
+                                    activeSortBy={attemptSorting.sortBy}
+                                    sortOrder={attemptSorting.sortOrder}
+                                    onSortChange={attemptSorting.handleSortChange}
+                                >
+                                    Error
+                                </AdminSortableTableHeaderCell>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-100">
+                            {attemptSorting.sortedRows.length === 0 ? (
+                                <tr>
+                                    <td className="py-3 text-gray-500" colSpan={6}>
+                                        No Shibboleth authentication attempts recorded yet.
+                                    </td>
+                                </tr>
+                            ) : (
+                                attemptSorting.sortedRows.map((attempt) => (
+                                    <tr key={attempt.id}>
+                                        <td className="whitespace-nowrap py-2 pr-4 text-gray-700">
+                                            {formatDashboardDateTime(attempt.createdAt, language)}
+                                        </td>
+                                        <td className="py-2 pr-4 font-medium text-gray-900">{attempt.status}</td>
+                                        <td className="py-2 pr-4 text-gray-700">{attempt.stage}</td>
+                                        <td className="py-2 pr-4 text-gray-700">{attempt.email || '-'}</td>
+                                        <td className="py-2 pr-4 text-gray-700">{attempt.displayName || '-'}</td>
+                                        <td className="max-w-xs py-2 pr-4 text-gray-600">
+                                            {attempt.errorMessage || '-'}
+                                        </td>
+                                    </tr>
+                                ))
+                            )}
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+
+            <section className="rounded-md border border-gray-200 bg-white p-5">
+                <h2 className="text-lg font-semibold text-gray-950">Shibboleth Users</h2>
+                <div className="mt-4 overflow-x-auto">
+                    <table className="min-w-full divide-y divide-gray-200 text-sm">
+                        <thead>
+                            <tr className="text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="user"
+                                    sortBy="username"
+                                    activeSortBy={userSorting.sortBy}
+                                    sortOrder={userSorting.sortOrder}
+                                    onSortChange={userSorting.handleSortChange}
+                                >
+                                    User
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="email"
+                                    sortBy="email"
+                                    activeSortBy={userSorting.sortBy}
+                                    sortOrder={userSorting.sortOrder}
+                                    onSortChange={userSorting.handleSortChange}
+                                >
+                                    Email
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="display name"
+                                    sortBy="displayName"
+                                    activeSortBy={userSorting.sortBy}
+                                    sortOrder={userSorting.sortOrder}
+                                    onSortChange={userSorting.handleSortChange}
+                                >
+                                    Display Name
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="institutional ID"
+                                    sortBy="institutionalId"
+                                    activeSortBy={userSorting.sortBy}
+                                    sortOrder={userSorting.sortOrder}
+                                    onSortChange={userSorting.handleSortChange}
+                                >
+                                    Institutional ID
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="logins"
+                                    sortBy="loginCount"
+                                    activeSortBy={userSorting.sortBy}
+                                    sortOrder={userSorting.sortOrder}
+                                    onSortChange={userSorting.handleSortChange}
+                                >
+                                    Logins
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="py-2 pr-4"
+                                    label="last login"
+                                    sortBy="lastLoggedInAt"
+                                    activeSortBy={userSorting.sortBy}
+                                    sortOrder={userSorting.sortOrder}
+                                    onSortChange={userSorting.handleSortChange}
+                                >
+                                    Last Login
+                                </AdminSortableTableHeaderCell>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-100">
+                            {userSorting.sortedRows.length === 0 ? (
+                                <tr>
+                                    <td className="py-3 text-gray-500" colSpan={6}>
+                                        No Shibboleth users have logged in yet.
+                                    </td>
+                                </tr>
+                            ) : (
+                                userSorting.sortedRows.map((identity) => {
+                                    const user = usersById.get(identity.userId);
+                                    return (
+                                        <tr key={identity.id}>
+                                            <td className="py-2 pr-4">
+                                                {user ? (
+                                                    <Link
+                                                        href={`/admin/users/${encodeURIComponent(user.username)}`}
+                                                        className="font-medium text-blue-700 hover:text-blue-900"
+                                                    >
+                                                        {user.username}
+                                                    </Link>
+                                                ) : (
+                                                    <span className="text-gray-500">
+                                                        Missing user #{identity.userId}
+                                                    </span>
+                                                )}
+                                            </td>
+                                            <td className="py-2 pr-4 text-gray-700">{identity.email}</td>
+                                            <td className="py-2 pr-4 text-gray-700">{identity.displayName || '-'}</td>
+                                            <td className="py-2 pr-4 text-gray-700">
+                                                {identity.unstructuredName || identity.eduPersonPrincipalName || '-'}
+                                            </td>
+                                            <td className="py-2 pr-4 text-gray-700">{identity.loginCount}</td>
+                                            <td className="whitespace-nowrap py-2 pr-4 text-gray-700">
+                                                {formatDashboardDateTime(identity.lastLoggedInAt, language)}
+                                            </td>
+                                        </tr>
+                                    );
+                                })
+                            )}
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </>
+    );
+}
+
+/**
+ * Resolves the default sort order for authentication attempt columns.
+ *
+ * @private internal helper of <ShibbolethSortableTables/>
+ */
+function resolveShibbolethAuthenticationAttemptDefaultSortOrder(
+    sortBy: ShibbolethAuthenticationAttemptSortField,
+): AdminTableSortOrder {
+    return sortBy === 'createdAt' ? 'desc' : 'asc';
+}
+
+/**
+ * Resolves the comparable value for one authentication attempt row.
+ *
+ * @private internal helper of <ShibbolethSortableTables/>
+ */
+function resolveShibbolethAuthenticationAttemptSortValue(
+    attempt: ShibbolethAuthenticationAttemptRow,
+    sortBy: ShibbolethAuthenticationAttemptSortField,
+) {
+    return attempt[sortBy];
+}
+
+/**
+ * Resolves the default sort order for Shibboleth user columns.
+ *
+ * @private internal helper of <ShibbolethSortableTables/>
+ */
+function resolveShibbolethUserDefaultSortOrder(sortBy: ShibbolethUserSortField): AdminTableSortOrder {
+    return sortBy === 'loginCount' || sortBy === 'lastLoggedInAt' ? 'desc' : 'asc';
+}
+
+/**
+ * Resolves the comparable value for one Shibboleth user row.
+ *
+ * @private internal helper of <ShibbolethSortableTables/>
+ */
+function resolveShibbolethUserSortValue(
+    identity: ShibbolethUserIdentityRow,
+    sortBy: ShibbolethUserSortField,
+    usersById: ReadonlyMap<number, PublicUser>,
+) {
+    if (sortBy === 'username') {
+        return usersById.get(identity.userId)?.username || '';
+    }
+
+    if (sortBy === 'institutionalId') {
+        return identity.unstructuredName || identity.eduPersonPrincipalName || '';
+    }
+
+    return identity[sortBy];
+}
+
+/**
+ * Formats an optional Shibboleth date-time value for the dashboard.
+ *
+ * @private internal helper of <ShibbolethSortableTables/>
+ */
+function formatDashboardDateTime(value: string | null | undefined, language: ServerLanguageCode): string {
+    return formatServerLanguageHumanReadableDate(value, language, { fallbackLabel: 'Never' });
+}

package/apps/agents-server/src/app/admin/login-methods/shibboleth/page.tsx

@@ -5,8 +5,6 @@ import { $getTableName } from '../../../../database/$getTableName';
 import { $provideSupabaseForServer } from '../../../../database/$provideSupabaseForServer';
 import { ForbiddenPage } from '../../../../components/ForbiddenPage/ForbiddenPage';
 import { isUserAdmin } from '../../../../utils/isUserAdmin';
-import type { ServerLanguageCode } from '../../../../languages/ServerLanguageRegistry';
-import { formatServerLanguageHumanReadableDate } from '../../../../utils/localization/formatServerLanguageHumanReadableDate';
 import { getRequestServerLanguage } from '../../../../utils/localization/getRequestServerLanguage';
 import { PUBLIC_USER_SELECT_COLUMNS, toPublicUser, type PublicUser } from '../../../../utils/publicUser';
 import {
@@ -16,6 +14,7 @@ import {
     type ShibbolethAuthenticationAttemptRow,
     type ShibbolethUserIdentityRow,
 } from '../../../../utils/shibbolethAuthentication';
+import { ShibbolethSortableTables } from './ShibbolethSortableTables';
 
 /**
  * Builds an absolute URL for Shibboleth route configuration inside server components.
@@ -102,13 +101,6 @@ async function loadShibbolethIdentitiesWithUsers(): Promise<{
     };
 }
 
-/**
- * Formats an optional date-time value for the dashboard.
- */
-function formatDashboardDateTime(value: string | null | undefined, language: ServerLanguageCode): string {
-    return formatServerLanguageHumanReadableDate(value, language, { fallbackLabel: 'Never' });
-}
-
 /**
  * Handles Shibboleth login method dashboard page.
  */
@@ -251,105 +243,12 @@ export default async function ShibbolethLoginMethodPage() {
                 </ol>
             </section>
 
-            <section className="rounded-md border border-gray-200 bg-white p-5">
-                <h2 className="text-lg font-semibold text-gray-950">Authentication Attempts</h2>
-                <div className="mt-4 overflow-x-auto">
-                    <table className="min-w-full divide-y divide-gray-200 text-sm">
-                        <thead>
-                            <tr className="text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
-                                <th className="py-2 pr-4">Time</th>
-                                <th className="py-2 pr-4">Status</th>
-                                <th className="py-2 pr-4">Stage</th>
-                                <th className="py-2 pr-4">Email</th>
-                                <th className="py-2 pr-4">Name</th>
-                                <th className="py-2 pr-4">Error</th>
-                            </tr>
-                        </thead>
-                        <tbody className="divide-y divide-gray-100">
-                            {attempts.length === 0 ? (
-                                <tr>
-                                    <td className="py-3 text-gray-500" colSpan={6}>
-                                        No Shibboleth authentication attempts recorded yet.
-                                    </td>
-                                </tr>
-                            ) : (
-                                attempts.map((attempt) => (
-                                    <tr key={attempt.id}>
-                                        <td className="whitespace-nowrap py-2 pr-4 text-gray-700">
-                                            {formatDashboardDateTime(attempt.createdAt, language)}
-                                        </td>
-                                        <td className="py-2 pr-4 font-medium text-gray-900">{attempt.status}</td>
-                                        <td className="py-2 pr-4 text-gray-700">{attempt.stage}</td>
-                                        <td className="py-2 pr-4 text-gray-700">{attempt.email || '-'}</td>
-                                        <td className="py-2 pr-4 text-gray-700">{attempt.displayName || '-'}</td>
-                                        <td className="max-w-xs py-2 pr-4 text-gray-600">
-                                            {attempt.errorMessage || '-'}
-                                        </td>
-                                    </tr>
-                                ))
-                            )}
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="rounded-md border border-gray-200 bg-white p-5">
-                <h2 className="text-lg font-semibold text-gray-950">Shibboleth Users</h2>
-                <div className="mt-4 overflow-x-auto">
-                    <table className="min-w-full divide-y divide-gray-200 text-sm">
-                        <thead>
-                            <tr className="text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
-                                <th className="py-2 pr-4">User</th>
-                                <th className="py-2 pr-4">Email</th>
-                                <th className="py-2 pr-4">Display Name</th>
-                                <th className="py-2 pr-4">Institutional ID</th>
-                                <th className="py-2 pr-4">Logins</th>
-                                <th className="py-2 pr-4">Last Login</th>
-                            </tr>
-                        </thead>
-                        <tbody className="divide-y divide-gray-100">
-                            {identitiesWithUsers.identities.length === 0 ? (
-                                <tr>
-                                    <td className="py-3 text-gray-500" colSpan={6}>
-                                        No Shibboleth users have logged in yet.
-                                    </td>
-                                </tr>
-                            ) : (
-                                identitiesWithUsers.identities.map((identity) => {
-                                    const user = identitiesWithUsers.usersById.get(identity.userId);
-                                    return (
-                                        <tr key={identity.id}>
-                                            <td className="py-2 pr-4">
-                                                {user ? (
-                                                    <Link
-                                                        href={`/admin/users/${encodeURIComponent(user.username)}`}
-                                                        className="font-medium text-blue-700 hover:text-blue-900"
-                                                    >
-                                                        {user.username}
-                                                    </Link>
-                                                ) : (
-                                                    <span className="text-gray-500">
-                                                        Missing user #{identity.userId}
-                                                    </span>
-                                                )}
-                                            </td>
-                                            <td className="py-2 pr-4 text-gray-700">{identity.email}</td>
-                                            <td className="py-2 pr-4 text-gray-700">{identity.displayName || '-'}</td>
-                                            <td className="py-2 pr-4 text-gray-700">
-                                                {identity.unstructuredName || identity.eduPersonPrincipalName || '-'}
-                                            </td>
-                                            <td className="py-2 pr-4 text-gray-700">{identity.loginCount}</td>
-                                            <td className="whitespace-nowrap py-2 pr-4 text-gray-700">
-                                                {formatDashboardDateTime(identity.lastLoggedInAt, language)}
-                                            </td>
-                                        </tr>
-                                    );
-                                })
-                            )}
-                        </tbody>
-                    </table>
-                </div>
-            </section>
+            <ShibbolethSortableTables
+                attempts={attempts}
+                identities={identitiesWithUsers.identities}
+                language={language}
+                users={Array.from(identitiesWithUsers.usersById.values())}
+            />
         </div>
     );
 }

package/apps/agents-server/src/app/admin/messages/MessagesClient.tsx

@@ -8,8 +8,12 @@ import {
     $fetchMessages,
     type MessageRow,
     type MessageSendAttemptRow,
+    type MessageSortField,
+    type MessageSortOrder,
 } from '../../../utils/messagesAdmin';
 import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
+import { AdminSortableTableHeaderCell } from '../_components/AdminSortableTableHeaderCell';
+import { resolveNextAdminTableSortState } from '../_components/adminTableSorting';
 
 /**
  * Formats date.
@@ -40,6 +44,13 @@ function getStatusBadge(attempts: MessageSendAttemptRow[] | undefined) {
     return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Failed ({attempts.length})</span>;
 }
 
+/**
+ * Resolves the initial direction used when switching message sort fields.
+ */
+function resolveMessageDefaultSortOrder(sortBy: MessageSortField): MessageSortOrder {
+    return sortBy === 'createdAt' ? 'desc' : 'asc';
+}
+
 /**
  * Handles messages client.
  */
@@ -53,6 +64,8 @@ export function MessagesClient() {
     const [search, setSearch] = useState('');
     const [channel, setChannel] = useState('');
     const [direction, setDirection] = useState('');
+    const [sortBy, setSortBy] = useState<MessageSortField>('createdAt');
+    const [sortOrder, setSortOrder] = useState<MessageSortOrder>('desc');
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
@@ -71,6 +84,8 @@ export function MessagesClient() {
                     search: search || undefined,
                     channel: channel || undefined,
                     direction: direction || undefined,
+                    sortBy,
+                    sortOrder,
                 });
 
                 if (isCancelled) return;
@@ -92,7 +107,7 @@ export function MessagesClient() {
         return () => {
             isCancelled = true;
         };
-    }, [page, pageSize, search, channel, direction]);
+    }, [page, pageSize, search, channel, direction, sortBy, sortOrder]);
 
     const totalPages = useMemo(() => {
         if (total <= 0 || pageSize <= 0) return 1;
@@ -113,6 +128,19 @@ export function MessagesClient() {
         }
     };
 
+    const handleSortChange = (nextSortBy: MessageSortField): void => {
+        const nextSortState = resolveNextAdminTableSortState({
+            currentSortBy: sortBy,
+            currentSortOrder: sortOrder,
+            nextSortBy,
+            resolveDefaultSortOrder: resolveMessageDefaultSortOrder,
+        });
+
+        setSortBy(nextSortState.sortBy);
+        setSortOrder(nextSortState.sortOrder);
+        setPage(1);
+    };
+
     const pagination = (
         <div className="mt-4 flex flex-col items-center justify-between gap-3 border-t border-gray-100 pt-4 text-xs text-gray-600 md:flex-row">
             <div>
@@ -259,11 +287,47 @@ export function MessagesClient() {
                         <table className="min-w-full divide-y divide-gray-200 text-sm">
                             <thead className="bg-gray-50">
                                 <tr>
-                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Time</th>
-                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Channel</th>
-                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Direction</th>
+                                    <AdminSortableTableHeaderCell
+                                        className="px-4 py-3 text-left font-medium text-gray-500"
+                                        label="time"
+                                        sortBy="createdAt"
+                                        activeSortBy={sortBy}
+                                        sortOrder={sortOrder}
+                                        onSortChange={handleSortChange}
+                                    >
+                                        Time
+                                    </AdminSortableTableHeaderCell>
+                                    <AdminSortableTableHeaderCell
+                                        className="px-4 py-3 text-left font-medium text-gray-500"
+                                        label="channel"
+                                        sortBy="channel"
+                                        activeSortBy={sortBy}
+                                        sortOrder={sortOrder}
+                                        onSortChange={handleSortChange}
+                                    >
+                                        Channel
+                                    </AdminSortableTableHeaderCell>
+                                    <AdminSortableTableHeaderCell
+                                        className="px-4 py-3 text-left font-medium text-gray-500"
+                                        label="direction"
+                                        sortBy="direction"
+                                        activeSortBy={sortBy}
+                                        sortOrder={sortOrder}
+                                        onSortChange={handleSortChange}
+                                    >
+                                        Direction
+                                    </AdminSortableTableHeaderCell>
                                     <th className="px-4 py-3 text-left font-medium text-gray-500">Sender/Recipients</th>
-                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Content</th>
+                                    <AdminSortableTableHeaderCell
+                                        className="px-4 py-3 text-left font-medium text-gray-500"
+                                        label="content"
+                                        sortBy="content"
+                                        activeSortBy={sortBy}
+                                        sortOrder={sortOrder}
+                                        onSortChange={handleSortChange}
+                                    >
+                                        Content
+                                    </AdminSortableTableHeaderCell>
                                     <th className="px-4 py-3 text-left font-medium text-gray-500">Status</th>
                                 </tr>
                             </thead>