{message}
{searchTerm && (
@@ -108,85 +315,15 @@ export function OrganizationTableBody({
className="hover:bg-muted/50 cursor-pointer transition-colors"
onClick={() => handleRowClick(organization.id)}
>
-
-
- {organization.name}
-
-
-
-
- {formatRelativeTime(organization.created_at)}
-
-
-
-
- {formatMicrodollars(organization.microdollars_used)}
-
-
-
-
- {formatMicrodollars(
- organization.total_microdollars_acquired - organization.microdollars_used
- )}
-
-
-
- {organization.member_count}
-
-
-
- {organization.require_seats ? 'Yes' : 'No'}
-
-
-
- {organization.plan ? (
-
- {organization.plan}
-
- ) : (
- -
- )}
-
-
- {organization.subscription_amount_usd ? (
-
- ${organization.subscription_amount_usd.toFixed(2)}
-
- ) : (
- -
- )}
-
-
- {organization.created_by_kilo_user_id && organization.created_by_user_email ? (
- e.stopPropagation()}
- >
- {organization.created_by_user_email}
-
- ) : (
- Not set
- )}
-
- {showDeleted && (
-
-
- {organization.deleted_at ? 'Yes' : 'No'}
-
-
+ {variant === 'entitlements' ? (
+
+ ) : (
+
)}
-
- e.stopPropagation()}
- >
- View Org
-
-
))}
diff --git a/apps/web/src/app/admin/components/OrganizationTableHeader.tsx b/apps/web/src/app/admin/components/OrganizationTableHeader.tsx
index 260122a2d0..c06cd0823d 100644
--- a/apps/web/src/app/admin/components/OrganizationTableHeader.tsx
+++ b/apps/web/src/app/admin/components/OrganizationTableHeader.tsx
@@ -4,22 +4,48 @@ import { TableHead, TableHeader, TableRow } from '@/components/ui/table';
import type { OrganizationSortableField } from '@/types/admin';
import { SortableButton } from './SortableButton';
+export type TableVariant = 'entitlements' | 'usage';
+
type OrganizationSortConfig = {
field: OrganizationSortableField;
direction: 'asc' | 'desc';
};
interface OrganizationTableHeaderProps {
+ variant: TableVariant;
sortConfig: OrganizationSortConfig | null;
onSort: (field: OrganizationSortableField) => void;
showDeleted?: boolean;
+ showStripeStatus?: boolean;
}
export function OrganizationTableHeader({
+ variant,
sortConfig,
onSort,
showDeleted,
+ showStripeStatus = true,
}: OrganizationTableHeaderProps) {
+ if (variant === 'entitlements') {
+ return (
+
+
+
+
+ Name
+
+
+ Plan
+ Kilo Pass
+ {showStripeStatus && Stripe Status}
+ Subscription
+ Links
+ {showDeleted && Deleted}
+
+
+ );
+ }
+
return (
@@ -28,11 +54,6 @@ export function OrganizationTableHeader({
Name
-
-
- Created
-
-
Usage
@@ -45,15 +66,15 @@ export function OrganizationTableHeader({
- Members
+ Users / Seats
- Seats Required
- Plan
- Subscription Amount
- Created By
+ Tier Features
+ Integrations
+ KiloClaw
+ Auto Top-Up
+ Links
{showDeleted && Deleted}
- Actions
);
diff --git a/apps/web/src/app/admin/components/OrganizationsTable.tsx b/apps/web/src/app/admin/components/OrganizationsTable.tsx
index 73cfb987b6..a7016e38f9 100644
--- a/apps/web/src/app/admin/components/OrganizationsTable.tsx
+++ b/apps/web/src/app/admin/components/OrganizationsTable.tsx
@@ -3,6 +3,7 @@
import { useCallback, useMemo, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Table } from '@/components/ui/table';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { OrganizationTableHeader } from './OrganizationTableHeader';
import { OrganizationTableBody } from './OrganizationTableBody';
import { OrganizationTablePagination } from './OrganizationTablePagination';
@@ -12,6 +13,7 @@ import { OrganizationMetricCards } from './OrganizationMetricCards';
import { useOrganizationsList } from '@/app/admin/api/organizations/hooks';
import type { OrganizationSortableField } from '@/types/admin';
import type { PageSize } from '@/types/pagination';
+import type { TableVariant } from './OrganizationTableHeader';
import AdminPage from '@/app/admin/components/AdminPage';
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-react';
@@ -22,20 +24,43 @@ type OrganizationSortConfig = {
direction: 'asc' | 'desc';
};
-export function OrganizationsTable() {
+// `create` is required only when the page wants the create button rendered;
+// callers that omit `create` get no button. This avoids a never-rendered default
+// label and keeps the create-button-label and click-target wired together.
+type CreateButtonConfig = {
+ label: string;
+};
+
+type OrganizationsTableProps = {
+ mode?: 'paying' | 'trial' | 'all';
+ showMetrics?: boolean;
+ showStripeStatus?: boolean;
+ pageTitle?: string;
+ create?: CreateButtonConfig;
+ defaultTab?: TableVariant;
+};
+
+export function OrganizationsTable({
+ mode = 'paying',
+ showMetrics = true,
+ showStripeStatus = true,
+ pageTitle = 'Organizations',
+ create,
+ defaultTab = 'entitlements',
+}: OrganizationsTableProps) {
const router = useRouter();
const searchParams = useSearchParams();
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
const currentPage = parseInt(searchParams.get('page') || '1');
const currentPageSize = parseInt(searchParams.get('limit') || '25') as PageSize;
- const currentSortBy = (searchParams.get('sortBy') || 'created_at') as OrganizationSortableField;
+ const currentSortBy = (searchParams.get('sortBy') || 'name') as OrganizationSortableField;
const currentSortOrder = searchParams.get('sortOrder') || 'desc';
const currentSearch = searchParams.get('search') || '';
- const currentSeatsRequired = searchParams.get('seatsRequired') || '';
- const currentHasBalance = searchParams.get('hasBalance') || '';
- const currentStatus = searchParams.get('status') || 'all';
+ const currentIncludeDeleted = searchParams.get('include_deleted') === 'true';
+ const currentStripeStatus = searchParams.get('stripe_status') || '';
const currentPlan = searchParams.get('plan') || '';
+ const currentTab = (searchParams.get('tab') || defaultTab) as TableVariant;
const sortConfig: OrganizationSortConfig = useMemo(
() => ({
@@ -51,9 +76,9 @@ export function OrganizationsTable() {
sortBy: currentSortBy,
sortOrder: currentSortOrder as 'asc' | 'desc',
search: currentSearch,
- seatsRequired: currentSeatsRequired,
- hasBalance: currentHasBalance,
- status: currentStatus,
+ mode,
+ include_deleted: currentIncludeDeleted,
+ stripe_status: currentStripeStatus,
plan: currentPlan,
});
@@ -69,293 +94,195 @@ export function OrganizationsTable() {
}
});
- router.push(`/admin/organizations?${newSearchParams.toString()}`);
+ router.push(`?${newSearchParams.toString()}`);
},
[router, searchParams]
);
- const handleSearchChange = useCallback(
- (searchTerm: string) => {
- const params = {
- search: searchTerm,
- page: '1', // Reset to first page when searching
- limit: currentPageSize.toString(),
- sortBy: currentSortBy,
- sortOrder: currentSortOrder,
- seatsRequired: currentSeatsRequired,
- hasBalance: currentHasBalance,
- status: currentStatus === 'all' ? '' : currentStatus,
- plan: currentPlan === 'all' ? '' : currentPlan,
- };
-
- updateUrl(params);
- },
+ const sharedParams = useCallback(
+ () => ({
+ limit: currentPageSize.toString(),
+ sortBy: currentSortBy,
+ sortOrder: currentSortOrder,
+ include_deleted: currentIncludeDeleted ? 'true' : '',
+ stripe_status: currentStripeStatus,
+ plan: currentPlan === 'all' ? '' : currentPlan,
+ tab: currentTab,
+ }),
[
currentPageSize,
currentSortBy,
currentSortOrder,
- currentSeatsRequired,
- currentHasBalance,
- currentStatus,
+ currentIncludeDeleted,
+ currentStripeStatus,
currentPlan,
- updateUrl,
+ currentTab,
]
);
- const handleSeatsRequiredChange = useCallback(
- (value: string) => {
- const params = {
- search: currentSearch,
- page: '1', // Reset to first page when filtering
- limit: currentPageSize.toString(),
- sortBy: currentSortBy,
- sortOrder: currentSortOrder,
- seatsRequired: value,
- hasBalance: currentHasBalance,
- status: currentStatus === 'all' ? '' : currentStatus,
- plan: currentPlan === 'all' ? '' : currentPlan,
- };
-
- updateUrl(params);
+ const handleSearchChange = useCallback(
+ (searchTerm: string) => {
+ updateUrl({ ...sharedParams(), search: searchTerm, page: '1' });
},
- [
- currentSearch,
- currentPageSize,
- currentSortBy,
- currentSortOrder,
- currentHasBalance,
- currentStatus,
- currentPlan,
- updateUrl,
- ]
+ [sharedParams, updateUrl]
);
- const handleHasBalanceChange = useCallback(
- (value: string) => {
- const params = {
+ const handleIncludeDeletedChange = useCallback(
+ (value: boolean) => {
+ updateUrl({
+ ...sharedParams(),
+ include_deleted: value ? 'true' : '',
search: currentSearch,
- page: '1', // Reset to first page when filtering
- limit: currentPageSize.toString(),
- sortBy: currentSortBy,
- sortOrder: currentSortOrder,
- seatsRequired: currentSeatsRequired,
- hasBalance: value,
- status: currentStatus === 'all' ? '' : currentStatus,
- plan: currentPlan === 'all' ? '' : currentPlan,
- };
-
- updateUrl(params);
+ page: '1',
+ });
},
- [
- currentSearch,
- currentPageSize,
- currentSortBy,
- currentSortOrder,
- currentSeatsRequired,
- currentStatus,
- currentPlan,
- updateUrl,
- ]
+ [sharedParams, currentSearch, updateUrl]
);
- const handleStatusChange = useCallback(
+ const handleStripeStatusChange = useCallback(
(value: string) => {
- const params = {
- search: currentSearch,
- page: '1', // Reset to first page when filtering
- limit: currentPageSize.toString(),
- sortBy: currentSortBy,
- sortOrder: currentSortOrder,
- seatsRequired: currentSeatsRequired,
- hasBalance: currentHasBalance,
- status: value === 'all' ? '' : value,
- plan: currentPlan === 'all' ? '' : currentPlan,
- };
-
- updateUrl(params);
+ updateUrl({ ...sharedParams(), stripe_status: value, search: currentSearch, page: '1' });
},
- [
- currentSearch,
- currentPageSize,
- currentSortBy,
- currentSortOrder,
- currentSeatsRequired,
- currentHasBalance,
- currentPlan,
- updateUrl,
- ]
+ [sharedParams, currentSearch, updateUrl]
);
const handlePlanChange = useCallback(
(value: string) => {
- const params = {
- search: currentSearch,
- page: '1', // Reset to first page when filtering
- limit: currentPageSize.toString(),
- sortBy: currentSortBy,
- sortOrder: currentSortOrder,
- seatsRequired: currentSeatsRequired,
- hasBalance: currentHasBalance,
- status: currentStatus === 'all' ? '' : currentStatus,
+ updateUrl({
+ ...sharedParams(),
plan: value === 'all' ? '' : value,
- };
-
- updateUrl(params);
+ search: currentSearch,
+ page: '1',
+ });
},
- [
- currentSearch,
- currentPageSize,
- currentSortBy,
- currentSortOrder,
- currentSeatsRequired,
- currentHasBalance,
- currentStatus,
- updateUrl,
- ]
+ [sharedParams, currentSearch, updateUrl]
);
const handleResetFilters = useCallback(() => {
- const params = {
+ updateUrl({
search: currentSearch,
page: '1',
limit: currentPageSize.toString(),
sortBy: currentSortBy,
sortOrder: currentSortOrder,
- seatsRequired: '',
- hasBalance: '',
- status: '',
+ include_deleted: '',
+ stripe_status: '',
plan: '',
- };
-
- updateUrl(params);
- }, [currentSearch, currentPageSize, currentSortBy, currentSortOrder, updateUrl]);
+ tab: currentTab,
+ });
+ }, [currentSearch, currentPageSize, currentSortBy, currentSortOrder, currentTab, updateUrl]);
- // Handle sorting
const handleSort = useCallback(
(field: OrganizationSortableField) => {
const newDirection =
sortConfig.field === field && sortConfig.direction === 'asc' ? 'desc' : 'asc';
-
- const params = {
+ updateUrl({
+ ...sharedParams(),
search: currentSearch,
- page: '1', // Reset to first page when sorting
- limit: currentPageSize.toString(),
+ page: '1',
sortBy: field,
sortOrder: newDirection,
- seatsRequired: currentSeatsRequired,
- hasBalance: currentHasBalance,
- status: currentStatus === 'all' ? '' : currentStatus,
- plan: currentPlan === 'all' ? '' : currentPlan,
- };
-
- updateUrl(params);
+ });
},
- [
- sortConfig,
- currentPageSize,
- currentSearch,
- currentSeatsRequired,
- currentHasBalance,
- currentStatus,
- currentPlan,
- updateUrl,
- ]
+ [sortConfig, sharedParams, currentSearch, updateUrl]
);
- // Handle page change
const handlePageChange = useCallback(
(page: number) => {
- const params = {
- search: currentSearch,
- page: page.toString(),
- limit: currentPageSize.toString(),
- sortBy: currentSortBy,
- sortOrder: currentSortOrder,
- seatsRequired: currentSeatsRequired,
- hasBalance: currentHasBalance,
- status: currentStatus === 'all' ? '' : currentStatus,
- plan: currentPlan === 'all' ? '' : currentPlan,
- };
-
- updateUrl(params);
+ updateUrl({ ...sharedParams(), search: currentSearch, page: page.toString() });
},
- [
- currentPageSize,
- currentSortBy,
- currentSortOrder,
- currentSearch,
- currentSeatsRequired,
- currentHasBalance,
- currentStatus,
- currentPlan,
- updateUrl,
- ]
+ [sharedParams, currentSearch, updateUrl]
);
const handlePageSizeChange = useCallback(
(pageSize: PageSize) => {
- const params = {
+ updateUrl({
+ ...sharedParams(),
search: currentSearch,
- page: '1', // Reset to first page when changing page size
+ page: '1',
limit: pageSize.toString(),
- sortBy: currentSortBy,
- sortOrder: currentSortOrder,
- seatsRequired: currentSeatsRequired,
- hasBalance: currentHasBalance,
- status: currentStatus === 'all' ? '' : currentStatus,
- plan: currentPlan === 'all' ? '' : currentPlan,
- };
-
- updateUrl(params);
+ });
},
- [
- currentSortBy,
- currentSortOrder,
- currentSearch,
- currentSeatsRequired,
- currentHasBalance,
- currentStatus,
- currentPlan,
- updateUrl,
- ]
+ [sharedParams, currentSearch, updateUrl]
);
- const buttons = (
- <>
-
{' '}
-
+ const handleTabChange = useCallback(
+ (tab: TableVariant) => {
+ updateUrl({ ...sharedParams(), tab, page: '1' });
+ },
+ [sharedParams, updateUrl]
);
+ const buttons = create ? (
+
+ ) : null;
+
const breadcrumbs = (
+
+ {pageTitle}
+
+ );
+
+ const tableContent = (variant: TableVariant) => (
<>
-
- Organizations
-
+
+
+
+
+
);
return (
- {/* Organization Metrics */}
-
+ {showMetrics &&
}
-
-
-
-
-
+
handleTabChange(v as TableVariant)}>
+
+ Entitlements
+ Usage
+
+ {tableContent('entitlements')}
+ {tableContent('usage')}
+
}>
+