feat(fe): complete kb ui

web/src/app/home/knowledge/components/kb-docs/documents/columns.tsx

@@ -1,6 +1,16 @@
 'use client';
 
 import { ColumnDef } from '@tanstack/react-table';
+import { MoreHorizontal } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { useTranslation } from 'react-i18next';
 
 export type DocumentFile = {
@@ -9,7 +19,9 @@ export type DocumentFile = {
   status: string;
 };
 
-export const columns = (): ColumnDef<DocumentFile>[] => {
+export const columns = (
+  onDelete: (id: string) => void,
+): ColumnDef<DocumentFile>[] => {
   const { t } = useTranslation();
   return [
     {
@@ -20,5 +32,33 @@ export const columns = (): ColumnDef<DocumentFile>[] => {
       accessorKey: 'status',
       header: t('knowledge.documentsTab.status'),
     },
+    {
+      id: 'actions',
+      cell: ({ row }) => {
+        const document = row.original;
+
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">
+                  {t('knowledge.documentsTab.actions')}
+                </span>
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>
+                {t('knowledge.documentsTab.actions')}
+              </DropdownMenuLabel>
+
+              <DropdownMenuItem onClick={() => onDelete(document.id)}>
+                {t('knowledge.documentsTab.delete')}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
   ];
 };