Add action buttons to products

playground/src/app/(playground)/playground/products/components/columns.tsx

@@ -7,7 +7,7 @@ import { Product } from "../data/productSchema";
 import { DataTableColumnHeader } from "./data-table-column-header";
 import { DataTableRowActions } from "./data-table-row-actions";
 import { statuses } from "../data/data";
-import Sparkle from "../../../../../utils/Sparkle";
+import Sparkle from "@/utils/Sparkle";
 import { Skeleton } from "@/components/ui/skeleton";
 
 // Function to generate a random width within a range
@@ -36,14 +36,14 @@ const VariableWidthSkeleton = ({
 
 export const columns: ColumnDef<Product>[] = [
   {
-    accessorKey: "imageKey",
+    accessorKey: "sparkleKey",
     header: ({ column }) => <DataTableColumnHeader column={column} title="" />,
     cell: ({ row }) => (
       <div className="flex items-center justify-center w-8 h-8">
         {row.original.id.startsWith("skeleton-") ? (
           <Skeleton className="h-8 w-8" />
         ) : (
-          <Sparkle address={row.getValue("imageKey")} size={32} />
+          <Sparkle address={row.getValue("sparkleKey")} size={32} />
         )}
       </div>
     ),
@@ -138,8 +138,25 @@ export const columns: ColumnDef<Product>[] = [
       </div>
     ),
   },
-  // {
-  //   id: "actions",
-  //   cell: ({ row }) => <DataTableRowActions row={row} />,
-  // },
+  {
+    accessorKey: "product",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Product" />
+    ),
+    cell: ({ row }) => (
+      <div className="w-[100px]">
+        {row.original.id.startsWith("skeleton-") ? (
+          <VariableWidthSkeleton minWidth={60} maxWidth={100} height={20} />
+        ) : (
+          <Badge variant="outline" className="rounded-none">
+            <div className="truncate">{row.getValue("product")}</div>
+          </Badge>
+        )}
+      </div>
+    ),
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => <DataTableRowActions row={row} />,
+  },
 ];

playground/src/app/(playground)/playground/products/components/data-table-pagination.tsx

@@ -25,8 +25,10 @@ export function DataTablePagination<TData>({
   return (
     <div className="flex items-center justify-between px-2">
       <div className="flex-1 text-sm text-muted-foreground">
-        {/*{table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.*/}
+        {/*
+        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+        {table.getFilteredRowModel().rows.length} row(s) selected.
+        */}
       </div>
       <div className="flex items-center space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
@@ -75,7 +77,11 @@ export function DataTablePagination<TData>({
           <Button
             variant="outline"
             className="h-8 w-8 p-0"
-            onClick={() => table.nextPage()}
+            onClick={() => {
+              console.log("Next page ...");
+              table.nextPage();
+              console.log(table.getState().pagination);
+            }}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>

playground/src/app/(playground)/playground/products/components/data-table-row-actions.tsx

@@ -7,24 +7,49 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
   DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { productSchema } from "../data/productSchema";
+import { ExternalLink, XIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Product } from "../data/productSchema";
+import { useGlam } from "@glam/anchor/react";
+import { PublicKey } from "@solana/web3.js";
+import { toast } from "@/components/ui/use-toast";
+import { parseTxError } from "@/lib/error";
+import { ExplorerLink } from "@/components/ExplorerLink";
 
-interface DataTableRowActionsProps<TData> {
+interface DataTableRowActionsProps<TData extends Product> {
   row: Row<TData>;
 }
 
-export function DataTableRowActions<TData>({
+export function DataTableRowActions({
   row,
-}: DataTableRowActionsProps<TData>) {
+}: DataTableRowActionsProps<Product>) {
+  const router = useRouter();
+  const { glamClient } = useGlam();
+
+  const handleNavigation = (path: string) => {
+    router.push(path);
+  };
+
+  const close = async (product: Product) => {
+    console.log("Close product", product);
+    try {
+      const txSig = await glamClient.fund.closeFund(new PublicKey(product.id));
+      toast({
+        title: `Closed ${product.product}`,
+        description: <ExplorerLink path={`tx/${txSig}`} label={txSig} />,
+      });
+    } catch (error) {
+      toast({
+        title: `Failed to closed ${product.product}`,
+        description: parseTxError(error),
+        variant: "destructive",
+      });
+    }
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -37,13 +62,46 @@ export function DataTableRowActions<TData>({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[160px]">
-        <DropdownMenuItem>Edit</DropdownMenuItem>
-        <DropdownMenuItem>Make a copy</DropdownMenuItem>
         <DropdownMenuItem>Favorite</DropdownMenuItem>
+        <DropdownMenuItem
+          className="w-full flex justify-between"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const next =
+              row.original.product === "Mint"
+                ? "/mint/access"
+                : "/vault/access";
+            handleNavigation(next);
+          }}
+        >
+          <span>Delegates</span>
+          <ExternalLink className="h-4 w-4 ml-2" />
+        </DropdownMenuItem>
+        {["Vault", "Fund"].includes(row.original.product) ? (
+          <DropdownMenuItem
+            className="w-full flex justify-between"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleNavigation("/vault/integrations");
+            }}
+          >
+            <span>Integrations</span>
+            <ExternalLink className="h-4 w-4 ml-2" />
+          </DropdownMenuItem>
+        ) : null}
         <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Delete
-          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+        <DropdownMenuItem
+          className="w-full flex justify-between"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            close(row.original);
+          }}
+        >
+          <span>Close</span>
+          <XIcon className="h-4 w-4 ml-2" />
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

playground/src/app/(playground)/playground/products/components/data-table.tsx

@@ -13,6 +13,7 @@ import {
   getSortedRowModel,
   useReactTable,
   ColumnDef,
+  getPaginationRowModel,
 } from "@tanstack/react-table";
 import { useRouter } from "next/navigation";
 
@@ -28,6 +29,7 @@ import {
 import { DataTableToolbar } from "./data-table-toolbar";
 import { columns as defaultColumns } from "./columns";
 import { Product } from "../data/productSchema";
+import { DataTablePagination } from "./data-table-pagination";
 
 // Number of skeleton rows to display
 const SKELETON_ROW_COUNT = 10;
@@ -47,7 +49,7 @@ export function DataTable<TData extends Product, TValue>({
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
+    [],
   );
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
@@ -56,15 +58,20 @@ export function DataTable<TData extends Product, TValue>({
     () =>
       Array(SKELETON_ROW_COUNT)
         .fill(null)
-        .map((_, index) => ({ id: `skeleton-${index}` } as TData)),
-    []
+        .map((_, index) => ({ id: `skeleton-${index}` }) as TData),
+    [],
   );
 
   const tableData = React.useMemo(
     () => (isLoading || data.length === 0 ? skeletonData : data),
-    [isLoading, skeletonData, data]
+    [isLoading, skeletonData, data],
   );
 
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
   const table = useReactTable({
     data: tableData,
     columns,
@@ -73,8 +80,11 @@ export function DataTable<TData extends Product, TValue>({
       columnVisibility,
       rowSelection,
       columnFilters,
+      pagination,
     },
+    onPaginationChange: setPagination,
     enableRowSelection: true,
+    getPaginationRowModel: getPaginationRowModel(),
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
@@ -106,7 +116,7 @@ export function DataTable<TData extends Product, TValue>({
                       ? null
                       : flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                   </TableHead>
                 ))}
@@ -131,7 +141,7 @@ export function DataTable<TData extends Product, TValue>({
           </TableBody>
         </Table>
       </div>
-      {/*<DataTablePagination table={table} />*/}
+      <DataTablePagination table={table} />
     </div>
   );
 }

playground/src/app/(playground)/playground/products/data/productSchema.ts

@@ -2,12 +2,13 @@ import { z } from "zod";
 
 export const productSchema = z.object({
   id: z.string(),
-  imageKey: z.string(),
+  sparkleKey: z.string(),
   name: z.string(),
   symbol: z.string(),
   baseAsset: z.string(),
   inception: z.string(),
   status: z.string(),
+  product: z.string(),
 });
 
 export type Product = z.infer<typeof productSchema>;