@tuturuuu/ui 0.25.0 → 0.25.3

package/src/components/ui/custom/tables/data-table.tsx

@@ -1,33 +1,73 @@
 'use client';
 
 import {
-  type ColumnDef,
   type ColumnFiltersState,
+  type ColumnVisibilityState,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getSortedRowModel,
-  type Row,
+  globalFilteringFeature,
+  type ReactTable,
+  type RowData,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
-  type VisibilityState,
+  type Column as TanStackColumn,
+  type ColumnDef as TanStackColumnDef,
+  type Row as TanStackRow,
+  tableFeatures,
+  useTable,
 } from '@tanstack/react-table';
 import { cn } from '@tuturuuu/utils/format';
 import { type ReactNode, useState } from 'react';
 import { Card } from '../../card';
 import {
-  Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
+  Table as UiTable,
 } from '../../table';
 import { DataTablePagination } from './data-table-pagination';
 import { DataTableToolbar } from './data-table-toolbar';
 
+export const dataTableFeatures = tableFeatures({
+  columnFilteringFeature,
+  globalFilteringFeature,
+  columnFacetingFeature,
+  rowSortingFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  columnVisibilityFeature,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+});
+
+const EMPTY_DATA: never[] = [];
+
+export type DataTableFeatures = typeof dataTableFeatures;
+export type ColumnDef<TData extends RowData, TValue = any> = TanStackColumnDef<
+  DataTableFeatures,
+  TData,
+  TValue
+>;
+export type Row<TData extends RowData> = TanStackRow<DataTableFeatures, TData>;
+export type Column<TData extends RowData, TValue = unknown> = TanStackColumn<
+  DataTableFeatures,
+  TData,
+  TValue
+>;
+export type Table<TData extends RowData> = ReactTable<DataTableFeatures, TData>;
+
 function isInteractiveTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLElement)) return false;
   return Boolean(
@@ -59,26 +99,27 @@ export interface ColumnGeneratorOptions<
 /**
  * Type for column generator functions that create table columns.
  */
-export type ColumnGenerator<TData = unknown, TValue = unknown> = (
+export type ColumnGenerator<TData extends RowData, TValue = unknown> = (
   options: ColumnGeneratorOptions<TData, TValue>
-) => ColumnDef<TData, TValue>[];
+) => ColumnDef<TData>[];
 
-export interface DataTableProps<TData, TValue> {
+export interface DataTableProps<TData extends RowData, TValue> {
   hideToolbar?: boolean;
   hidePagination?: boolean;
-  columns?: ColumnDef<TData, TValue>[];
+  columns?: ColumnDef<TData>[];
   filters?: ReactNode[] | ReactNode;
   extraColumns?: any[];
   extraData?: any;
   newObjectTitle?: string;
   editContent?: ReactNode;
+  emptyState?: ReactNode;
   namespace?: string | undefined;
   data?: TData[];
   count?: number | null;
   pageIndex?: number;
   pageSize?: number;
   defaultQuery?: string;
-  defaultVisibility?: VisibilityState;
+  defaultVisibility?: ColumnVisibilityState;
   disableSearch?: boolean;
   isFiltered?: boolean;
   enableServerSideSorting?: boolean;
@@ -114,7 +155,7 @@ export interface DataTableProps<TData, TValue> {
   rowWrapper?: (row: React.ReactElement, rowData: TData) => React.ReactElement;
 }
 
-export function DataTable<TData, TValue>({
+export function DataTable<TData extends RowData, TValue>({
   hideToolbar = false,
   hidePagination = false,
   columns,
@@ -123,6 +164,7 @@ export function DataTable<TData, TValue>({
   extraData,
   newObjectTitle,
   editContent,
+  emptyState,
   namespace,
   data,
   count,
@@ -155,7 +197,7 @@ export function DataTable<TData, TValue>({
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = useState({});
   const [columnVisibility, setColumnVisibility] =
-    useState<VisibilityState>(defaultVisibility);
+    useState<ColumnVisibilityState>(defaultVisibility);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [sorting, setSorting] = useState<SortingState>(
     enableServerSideSorting && currentSortBy && currentSortOrder
@@ -163,8 +205,9 @@ export function DataTable<TData, TValue>({
       : []
   );
 
-  const table = useReactTable({
-    data: data || [],
+  const table = useTable({
+    features: dataTableFeatures,
+    data: data || EMPTY_DATA,
     columns:
       columnGenerator && t
         ? columnGenerator({ t, namespace, extraColumns, extraData })
@@ -215,14 +258,7 @@ export function DataTable<TData, TValue>({
       : setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: enableServerSideSorting
-      ? undefined
-      : getSortedRowModel(),
     manualSorting: enableServerSideSorting,
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
   });
 
   return (
@@ -250,7 +286,7 @@ export function DataTable<TData, TValue>({
         />
       )}
       <Card className={tableCardClassName}>
-        <Table className={tableClassName}>
+        <UiTable className={tableClassName}>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -339,16 +375,19 @@ export function DataTable<TData, TValue>({
                     columns?.length ||
                     1
                   }
-                  className="h-24 text-center opacity-60"
+                  className={cn(
+                    'text-center',
+                    emptyState ? 'p-0' : 'h-24 opacity-60'
+                  )}
                 >
                   {data
-                    ? `${t?.('common.no-results')}.`
+                    ? emptyState || `${t?.('common.no-results')}.`
                     : `${t?.('common.loading')}…`}
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
-        </Table>
+        </UiTable>
       </Card>
 
       {hidePagination ||

package/src/components/ui/custom/workspace-select-icon.tsx

@@ -0,0 +1,58 @@
+import { cn } from '@tuturuuu/utils/format';
+import Image from 'next/image';
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
+import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
+import { resolveWorkspaceAvatarUrl } from './workspace-select-helpers';
+
+export function WorkspaceIcon({
+  name,
+  avatarUrl,
+  className,
+  fallbackLogoUrl = TUTURUUU_LOGO_URL,
+}: {
+  name?: string | null;
+  avatarUrl?: string | null;
+  className?: string;
+  fallbackLogoUrl?: string;
+}) {
+  const resolvedAvatarUrl = resolveWorkspaceAvatarUrl(avatarUrl);
+  const shouldSkipFallbackOptimization = /^https?:\/\//u.test(fallbackLogoUrl);
+
+  return (
+    <Avatar
+      className={cn(
+        'h-5 max-h-5 min-h-5 w-5 min-w-5 max-w-5 flex-none overflow-hidden',
+        resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm',
+        className
+      )}
+    >
+      <AvatarImage
+        alt={name || 'Workspace'}
+        className={cn(
+          'h-full w-full object-cover',
+          resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
+        )}
+        src={
+          resolvedAvatarUrl ||
+          (name ? `https://avatar.vercel.sh/${name}.png` : undefined)
+        }
+      />
+      <AvatarFallback
+        className={cn(
+          'h-full w-full text-xs',
+          resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
+        )}
+      >
+        <Image
+          alt=""
+          aria-hidden="true"
+          className="h-full w-full object-cover"
+          height={20}
+          src={fallbackLogoUrl}
+          unoptimized={shouldSkipFallbackOptimization}
+          width={20}
+        />
+      </AvatarFallback>
+    </Avatar>
+  );
+}

package/src/components/ui/custom/workspace-select-invitations.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Check, Loader2, Mail, RefreshCw, X } from '@tuturuuu/icons';
+import type { WorkspaceInvitationRecord } from '@tuturuuu/internal-api/workspaces';
+import {
+  acceptWorkspaceInvite,
+  declineWorkspaceInvite,
+  listWorkspaceInvitations,
+} from '@tuturuuu/internal-api/workspaces';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../button';
+import { CommandGroup, CommandItem } from '../command';
+import { WorkspaceIcon } from './workspace-select-icon';
+
+export function useWorkspaceInvitations({
+  cacheScope,
+  enabled,
+  onAccepted,
+  onDeclined,
+}: {
+  cacheScope?: string;
+  enabled: boolean;
+  onAccepted: (invitation: WorkspaceInvitationRecord) => void;
+  onDeclined: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const t = useTranslations();
+  const query = useQuery({
+    queryKey: ['workspace-invitations', ...(cacheScope ? [cacheScope] : [])],
+    queryFn: async () => (await listWorkspaceInvitations()).invitations,
+    enabled,
+    retry: 1,
+    staleTime: 30_000,
+  });
+  const invitations = query.data ?? [];
+  const mutation = useMutation({
+    mutationFn: async ({
+      action,
+      invitation,
+    }: {
+      action: 'accept' | 'decline';
+      invitation: WorkspaceInvitationRecord;
+    }) => {
+      if (action === 'accept') {
+        await acceptWorkspaceInvite(invitation.workspace.id);
+      } else {
+        await declineWorkspaceInvite(invitation.workspace.id);
+      }
+      return { action, invitation };
+    },
+    onSuccess: async ({ action, invitation }) => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['workspace-invitations'] }),
+        queryClient.invalidateQueries({ queryKey: ['workspaces'] }),
+        queryClient.invalidateQueries({ queryKey: ['user-workspaces'] }),
+        queryClient.invalidateQueries({ queryKey: ['workspace-user'] }),
+        queryClient.invalidateQueries({ queryKey: ['current-user'] }),
+        queryClient.invalidateQueries({ queryKey: ['user'] }),
+        queryClient.invalidateQueries({ queryKey: ['notifications'] }),
+      ]);
+
+      if (action === 'accept') {
+        toast.success(t('workspace-invitation.accept-success'));
+        onAccepted(invitation);
+      } else {
+        toast.success(t('workspace-invitation.decline-success'));
+        onDeclined();
+      }
+    },
+    onError: (error, { action }) => {
+      toast.error(
+        t(
+          action === 'accept'
+            ? 'workspace-invitation.accept-error'
+            : 'workspace-invitation.decline-error'
+        ),
+        {
+          description: error instanceof Error ? error.message : undefined,
+        }
+      );
+    },
+  });
+
+  return { invitations, mutation, query };
+}
+
+export function WorkspaceInvitationItems({
+  controller,
+  fallbackLogoUrl,
+}: {
+  controller: ReturnType<typeof useWorkspaceInvitations>;
+  fallbackLogoUrl: string;
+}) {
+  const t = useTranslations();
+  const { invitations, mutation, query } = controller;
+
+  return (
+    <>
+      {invitations.length > 0 && (
+        <CommandGroup
+          heading={`${t('workspace-invitation.list-eyebrow')} (${invitations.length})`}
+        >
+          {invitations.map((invitation) => {
+            const workspaceName =
+              invitation.workspace.name ||
+              invitation.workspace.handle ||
+              invitation.workspace.id;
+            const isPending =
+              mutation.isPending &&
+              mutation.variables?.invitation.workspace.id ===
+                invitation.workspace.id;
+
+            return (
+              <div
+                className="flex items-stretch gap-1 [&:has([cmdk-item][hidden])]:hidden"
+                key={`${invitation.workspace.id}-${invitation.source}`}
+              >
+                <CommandItem
+                  className="min-w-0 flex-1 gap-2"
+                  disabled={isPending}
+                  onSelect={() =>
+                    mutation.mutate({ action: 'accept', invitation })
+                  }
+                  value={`${workspaceName} ${invitation.workspace.handle || ''} ${invitation.source} ${invitation.type}`}
+                >
+                  <WorkspaceIcon
+                    avatarUrl={
+                      invitation.workspace.avatar_url ||
+                      invitation.workspace.logo_url
+                    }
+                    fallbackLogoUrl={fallbackLogoUrl}
+                    name={workspaceName}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-xs">{workspaceName}</div>
+                    <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+                      <Mail className="size-3" />
+                      {t(
+                        `workspace-invitation.${
+                          invitation.source === 'email'
+                            ? 'email-invite'
+                            : 'direct-invite'
+                        }`
+                      )}
+                      <span aria-hidden="true">·</span>
+                      {invitation.type === 'GUEST'
+                        ? t('common.guest_access')
+                        : t('common.members')}
+                    </div>
+                  </div>
+                  {isPending && mutation.variables?.action === 'accept' ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : (
+                    <Check className="size-3.5" />
+                  )}
+                  <span className="sr-only">
+                    {t('workspace-invitation.accept')}
+                  </span>
+                </CommandItem>
+                <Button
+                  aria-label={t('workspace-invitation.reject')}
+                  className="size-8 self-center"
+                  disabled={isPending}
+                  onClick={() =>
+                    mutation.mutate({ action: 'decline', invitation })
+                  }
+                  size="icon"
+                  title={t('workspace-invitation.reject')}
+                  type="button"
+                  variant="ghost"
+                >
+                  {isPending && mutation.variables?.action === 'decline' ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : (
+                    <X className="size-3.5" />
+                  )}
+                </Button>
+              </div>
+            );
+          })}
+        </CommandGroup>
+      )}
+      {query.isError && (
+        <CommandGroup>
+          <CommandItem
+            onSelect={() => query.refetch()}
+            value="retry workspace invitations"
+          >
+            {query.isFetching ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <RefreshCw className="size-4" />
+            )}
+            {t('common.retry')}
+          </CommandItem>
+        </CommandGroup>
+      )}
+    </>
+  );
+}

package/src/components/ui/custom/workspace-select.tsx

@@ -27,7 +27,6 @@ import {
 import { cn } from '@tuturuuu/utils/format';
 import { workspaceHandleSchema } from '@tuturuuu/utils/workspace-handle';
 import { WORKSPACE_LIMIT_ERROR_CODE } from '@tuturuuu/utils/workspace-limits';
-import Image from 'next/image';
 import { usePathname, useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
@@ -37,7 +36,6 @@ import { z } from 'zod';
 import { useForm } from '../../../hooks/use-form';
 import { useWorkspaceUser } from '../../../hooks/use-workspace-user';
 import { zodResolver } from '../../../resolvers';
-import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
 import { Badge } from '../badge';
 import { Button } from '../button';
 import {
@@ -74,6 +72,11 @@ import {
   normalizeWorkspaceSwitchPath,
   resolveWorkspaceAvatarUrl,
 } from './workspace-select-helpers';
+import { WorkspaceIcon } from './workspace-select-icon';
+import {
+  useWorkspaceInvitations,
+  WorkspaceInvitationItems,
+} from './workspace-select-invitations';
 import { useOpenWorkspaceSelectWhenRevealed } from './workspace-select-reveal';
 
 const FormSchema = z.object({
@@ -84,59 +87,6 @@ const JoinWorkspaceByHandleFormSchema = z.object({
   handle: workspaceHandleSchema,
 });
 
-function WorkspaceIcon({
-  name,
-  avatarUrl,
-  className,
-  fallbackLogoUrl = TUTURUUU_LOGO_URL,
-}: {
-  name?: string | null;
-  avatarUrl?: string | null;
-  className?: string;
-  fallbackLogoUrl?: string;
-}) {
-  const resolvedAvatarUrl = resolveWorkspaceAvatarUrl(avatarUrl);
-  const shouldSkipFallbackOptimization = /^https?:\/\//u.test(fallbackLogoUrl);
-
-  return (
-    <Avatar
-      className={cn(
-        'h-5 max-h-5 min-h-5 w-5 min-w-5 max-w-5 flex-none overflow-hidden',
-        resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm',
-        className
-      )}
-    >
-      <AvatarImage
-        src={
-          resolvedAvatarUrl ||
-          (name ? `https://avatar.vercel.sh/${name}.png` : undefined)
-        }
-        alt={name || 'Workspace'}
-        className={cn(
-          'h-full w-full object-cover',
-          resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
-        )}
-      />
-      <AvatarFallback
-        className={cn(
-          'h-full w-full text-xs',
-          resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
-        )}
-      >
-        <Image
-          alt=""
-          aria-hidden="true"
-          className="h-full w-full object-cover"
-          height={20}
-          src={fallbackLogoUrl}
-          unoptimized={shouldSkipFallbackOptimization}
-          width={20}
-        />
-      </AvatarFallback>
-    </Avatar>
-  );
-}
-
 export function WorkspaceSelect({
   wsId,
   hideLeading,
@@ -152,6 +102,7 @@ export function WorkspaceSelect({
   triggerClassName,
   popoverModal = false,
   platformWorkspaceSetupUrl,
+  cacheScope,
 }: {
   wsId: string;
   hideLeading?: boolean;
@@ -172,6 +123,8 @@ export function WorkspaceSelect({
   popoverModal?: boolean;
   /** Platform origin used to prepare a newly created satellite workspace. */
   platformWorkspaceSetupUrl?: string;
+  /** Authenticated identity used to isolate user-specific picker caches. */
+  cacheScope?: string;
 }) {
   const t = useTranslations();
   const locale = useLocale();
@@ -184,7 +137,7 @@ export function WorkspaceSelect({
       ? resolveWorkspaceId(wsId)
       : undefined;
   const { data: listedWorkspaces } = useQuery({
-    queryKey: ['workspaces'],
+    queryKey: ['workspaces', ...(cacheScope ? [cacheScope] : [])],
     queryFn: fetchWorkspaces,
     enabled: !!wsId,
   });
@@ -195,7 +148,11 @@ export function WorkspaceSelect({
       )
   );
   const { data: currentWorkspaceFallback } = useQuery({
-    queryKey: ['workspace-select-current-workspace', resolvedWorkspaceId],
+    queryKey: [
+      'workspace-select-current-workspace',
+      resolvedWorkspaceId,
+      ...(cacheScope ? [cacheScope] : []),
+    ],
     queryFn: async () =>
       (await getWorkspace(resolvedWorkspaceId!)) as InternalApiWorkspaceSummary,
     enabled: Boolean(resolvedWorkspaceId && !hasListedCurrentWorkspace),
@@ -206,7 +163,6 @@ export function WorkspaceSelect({
     currentWorkspaceFallback
   );
   const { data: currentUser } = useWorkspaceUser();
-
   const defaultWorkspaceId = currentUser?.default_workspace_id || null;
 
   const form = useForm({
@@ -228,6 +184,18 @@ export function WorkspaceSelect({
 
   const [loading, setLoading] = useState(false);
   const [joiningByHandle, setJoiningByHandle] = useState(false);
+  const invitationController = useWorkspaceInvitations({
+    cacheScope,
+    enabled: Boolean(wsId),
+    onAccepted: (invitation) => {
+      setOpen(false);
+      const slug = invitation.workspace.handle || invitation.workspace.id;
+      router.push(getWorkspaceLandingPath(slug));
+      router.refresh();
+    },
+    onDeclined: () => router.refresh(),
+  });
+  const invitations = invitationController.invitations;
 
   const updateDefaultWorkspaceMutation = useMutation({
     mutationFn: (workspaceId: string) =>
@@ -257,7 +225,7 @@ export function WorkspaceSelect({
     },
   });
 
-  const getWorkspaceLandingPath = (nextSlug: string) => {
+  function getWorkspaceLandingPath(nextSlug: string) {
     if (resolveNextPathname) {
       return resolveNextPathname({
         currentPathname: pathname || `/${wsId}`,
@@ -268,7 +236,7 @@ export function WorkspaceSelect({
     return customRedirectSuffix
       ? `/${nextSlug}/${customRedirectSuffix}`
       : `/${nextSlug}`;
-  };
+  }
 
   async function onSubmit(formData: z.infer<typeof FormSchema>) {
     if (disableCreateNewWorkspace) return;
@@ -450,7 +418,8 @@ export function WorkspaceSelect({
     }
   };
 
-  const hasSelectableWorkspaces = workspaces.length > 0;
+  const hasSelectableWorkspaces =
+    workspaces.length > 0 || invitations.length > 0;
   useOpenWorkspaceSelectWhenRevealed(hasSelectableWorkspaces, setOpen);
 
   const workspace =
@@ -616,6 +585,15 @@ export function WorkspaceSelect({
                   </Badge>
                 )}
               </div>
+              {invitations.length > 0 && (
+                <Badge
+                  aria-label={`${invitations.length} ${t('workspace-invitation.list-eyebrow')}`}
+                  className="h-5 min-w-5 justify-center px-1 text-[10px]"
+                  variant="destructive"
+                >
+                  {invitations.length > 99 ? '99+' : invitations.length}
+                </Badge>
+              )}
               {hideLeading || (
                 <ChevronDown className="ml-1 h-4 w-4 shrink-0 opacity-50" />
               )}
@@ -626,6 +604,10 @@ export function WorkspaceSelect({
               <CommandInput autoFocus placeholder="Search workspace..." />
               <CommandEmpty>No workspace found.</CommandEmpty>
               <CommandList className="max-h-64">
+                <WorkspaceInvitationItems
+                  controller={invitationController}
+                  fallbackLogoUrl={fallbackLogoUrl}
+                />
                 {groups.map((group) => (
                   <CommandGroup key={group.label} heading={group.label}>
                     {group.teams.map(

package/src/components/ui/finance/invoices/columns.test.tsx

@@ -1,5 +1,5 @@
-import type { ColumnDef } from '@tanstack/react-table';
 import { render, screen, waitFor } from '@testing-library/react';
+import type { ColumnDef } from '@tuturuuu/ui/custom/tables/data-table';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { invoiceColumns } from './columns';
 
@@ -19,8 +19,8 @@ function InvoicePriceCell({ price }: { price: number }) {
   });
   const priceColumn = columns.find(
     (column) =>
-      (column as ColumnDef<unknown> & { accessorKey?: string }).accessorKey ===
-      'price'
+      (column as ColumnDef<Record<string, unknown>> & { accessorKey?: string })
+        .accessorKey === 'price'
   );
 
   if (typeof priceColumn?.cell !== 'function') return null;

package/src/components/ui/finance/invoices/columns.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import type { ColumnDef } from '@tanstack/react-table';
 import type { Invoice } from '@tuturuuu/types/primitives/Invoice';
 import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
-import type { ColumnGeneratorOptions } from '@tuturuuu/ui/custom/tables/data-table';
+import type {
+  ColumnDef,
+  ColumnGeneratorOptions,
+} from '@tuturuuu/ui/custom/tables/data-table';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import { InvoiceRowActions } from '@tuturuuu/ui/finance/invoices/row-actions';
 import {