80 lines
1.8 KiB
TypeScript
80 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import type { ReactNode } from 'react';
|
|
import type { ColumnDef, SortingState } from '@tanstack/react-table';
|
|
import { Edit, RotateCcw } from 'lucide-react';
|
|
|
|
import { DataTable } from '@/components/data-table';
|
|
import { PERMISSIONS } from '@/constants/permissions';
|
|
import type { Plan } from '@/types';
|
|
|
|
interface PlanTableProps {
|
|
columns: ColumnDef<Plan>[];
|
|
plans: Plan[];
|
|
isLoading: boolean;
|
|
toolbar: ReactNode;
|
|
skip: number;
|
|
limit: number;
|
|
total: number;
|
|
sorting: SortingState;
|
|
onPageChange: (skip: number) => void;
|
|
onLimitChange: (limit: number) => void;
|
|
onSortingChange: (sorting: SortingState) => void;
|
|
onEdit: (plan: Plan) => void;
|
|
onToggleStatus: (plan: Plan) => void;
|
|
pendingPlanId?: number;
|
|
}
|
|
|
|
export function PlanTable({
|
|
columns,
|
|
plans,
|
|
isLoading,
|
|
toolbar,
|
|
skip,
|
|
limit,
|
|
total,
|
|
sorting,
|
|
onPageChange,
|
|
onLimitChange,
|
|
onSortingChange,
|
|
onEdit,
|
|
onToggleStatus,
|
|
pendingPlanId,
|
|
}: PlanTableProps) {
|
|
return (
|
|
<DataTable
|
|
title="Plans"
|
|
columns={columns}
|
|
data={plans}
|
|
isLoading={isLoading}
|
|
toolbar={toolbar}
|
|
emptyTitle="No plans found."
|
|
actions={[
|
|
{
|
|
label: 'Edit',
|
|
icon: <Edit className="size-4" />,
|
|
permission: PERMISSIONS.PLAN.UPDATE,
|
|
onClick: onEdit,
|
|
},
|
|
{
|
|
label: (plan) => (plan.is_active ? 'Deactivate' : 'Activate'),
|
|
icon: <RotateCcw className="size-4" />,
|
|
permission: PERMISSIONS.PLAN.DELETE,
|
|
disabled: (plan) => pendingPlanId === plan.id,
|
|
onClick: onToggleStatus,
|
|
},
|
|
]}
|
|
pagination={{
|
|
skip,
|
|
limit,
|
|
totalItems: total,
|
|
onPageChange,
|
|
onLimitChange,
|
|
}}
|
|
sorting={sorting}
|
|
onSortingChange={onSortingChange}
|
|
actionsSticky
|
|
/>
|
|
);
|
|
}
|