style: do inputs design modification

src/components/data-table/index.tsx

@@ -12,12 +12,22 @@ import {
 
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Button } from '@/components/ui/button';
-import { Edit3, Trash2 } from 'lucide-react';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import type { PermissionInput } from '@/hooks/usePermissions';
 
 import TopHeader from './Header';
 import TableHeader from './TableHeader';
 import { TableFooter } from './Footer';
+import { TableActionButton } from './TableActionButton';
+
+export interface DataTableAction<TData> {
+  label: string | ((item: TData) => string);
+  icon: React.ReactNode;
+  onClick: (item: TData) => void;
+  permission?: PermissionInput;
+  disabled?: (item: TData) => boolean;
+  className?: string;
+}
 
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -26,8 +36,7 @@ export interface DataTableProps<TData, TValue> {
   onAddNew?: () => void;
   addButtonText?: string;
   isLoading?: boolean;
-  onEdit?: (item: TData) => void;
-  onDelete?: (item: TData) => void;
+  actions?: DataTableAction<TData>[];
   toolbar?: React.ReactNode;
   emptyTitle?: string;
   emptyDescription?: string;
@@ -49,8 +58,7 @@ export function DataTable<TData, TValue>({
   onAddNew,
   addButtonText,
   isLoading = false,
-  onEdit,
-  onDelete,
+  actions,
   toolbar,
   emptyTitle = 'No results found.',
   emptyDescription = 'Try adjusting your filters or search terms.',
@@ -77,7 +85,7 @@ export function DataTable<TData, TValue>({
   const columns = React.useMemo(() => {
     const cols: ColumnDef<TData, TValue>[] = [...initialColumns];
 
-    if (onEdit || onDelete) {
+    if (actions?.length) {
       cols.push({
         id: 'actions',
         header: () => <div className="text-right">Actions</div>,
@@ -85,37 +93,33 @@ export function DataTable<TData, TValue>({
           const item = row.original;
           return (
             <div className="flex justify-end gap-2">
-              {onEdit && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onEdit(item);
-                  }}
-                >
-                  <Edit3 className="size-4" />
-                </Button>
-              )}
-              {onDelete && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onDelete(item);
-                  }}
-                >
-                  <Trash2 className="size-4 text-destructive" />
-                </Button>
-              )}
+              {actions.map((action) => {
+                const label =
+                  typeof action.label === 'function' ? action.label(item) : action.label;
+
+                return (
+                  <TableActionButton
+                    key={label}
+                    label={label}
+                    permission={action.permission}
+                    className={action.className}
+                    disabled={action.disabled?.(item)}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      action.onClick(item);
+                    }}
+                  >
+                    {action.icon}
+                  </TableActionButton>
+                );
+              })}
             </div>
           );
         },
       });
     }
     return cols;
-  }, [initialColumns, onEdit, onDelete]);
+  }, [actions, initialColumns]);
 
   const table = useReactTable({
     data,
@@ -158,7 +162,8 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <section className="space-y-4 rounded-lg border bg-card p-4">
+    <TooltipProvider delayDuration={0}>
+      <section className="space-y-4 rounded-lg border bg-card p-4">
         <TopHeader
           title={onAddNew ? title : undefined}
           itemCount={pagination?.totalItems ?? data.length}
@@ -186,10 +191,7 @@ export function DataTable<TData, TValue>({
                 ))
               ) : table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && 'selected'}
-                  >
+                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id}>
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -216,6 +218,7 @@ export function DataTable<TData, TValue>({
           pageSize={pagination?.limit}
           onPageSizeChange={pagination?.onLimitChange}
         />
-    </section>
+      </section>
+    </TooltipProvider>
   );
 }