style: do inputs design modification

src/app/(modules)/plans/components/PlanTable.tsx

@@ -2,8 +2,10 @@
 
 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 {
@@ -18,6 +20,9 @@ interface PlanTableProps {
   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({
@@ -32,6 +37,9 @@ export function PlanTable({
   onPageChange,
   onLimitChange,
   onSortingChange,
+  onEdit,
+  onToggleStatus,
+  pendingPlanId,
 }: PlanTableProps) {
   return (
     <DataTable
@@ -41,6 +49,21 @@ export function PlanTable({
       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,