chore: define type User and use it in users-table

src/components/admin/user-detail-viewer.tsx

@@ -17,6 +17,7 @@ import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { authClient } from '@/lib/auth-client';
+import type { User } from '@/lib/auth-types';
 import { formatDate } from '@/lib/formatter';
 import {
   Loader2Icon,
@@ -28,7 +29,6 @@ import {
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { toast } from 'sonner';
-import type { User } from './users-table';
 
 interface UserDetailViewerProps {
   user: User;
@@ -133,15 +133,7 @@ export function UserDetailViewer({ user }: UserDetailViewerProps) {
               className="size-12 border"
             />
             <div>
-              <DrawerTitle className="flex items-center gap-2">
-                {user.name}
-                <Badge
-                  variant={user.role === 'admin' ? 'default' : 'outline'}
-                  className="px-1.5"
-                >
-                  {user.role || 'user'}
-                </Badge>
-              </DrawerTitle>
+              <DrawerTitle>{user.name}</DrawerTitle>
               <DrawerDescription>{user.email}</DrawerDescription>
             </div>
           </div>
@@ -149,6 +141,13 @@ export function UserDetailViewer({ user }: UserDetailViewerProps) {
         <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
           <div className="grid gap-4">
             <div className="flex items-center gap-2">
+              {/* role */}
+              <Badge
+                variant={user.role === 'admin' ? 'default' : 'outline'}
+                className="px-1.5"
+              >
+                {user.role || 'user'}
+              </Badge>
               {/* email verified */}
               <Badge
                 variant="outline"

src/components/admin/users-table.tsx

@@ -24,6 +24,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import type { User } from '@/lib/auth-types';
 import { formatDate } from '@/lib/formatter';
 import { getStripeDashboardCustomerUrl } from '@/lib/urls/urls';
 import {
@@ -84,21 +85,6 @@ function DataTableColumnHeader<TData, TValue>({
   );
 }
 
-export interface User {
-  id: string;
-  name: string;
-  email: string;
-  emailVerified: boolean;
-  image: string | null;
-  role: string | null;
-  createdAt: Date;
-  updatedAt: Date;
-  customerId: string | null;
-  banned: boolean | null;
-  banReason: string | null;
-  banExpires: Date | null;
-}
-
 const columns: ColumnDef<User>[] = [
   {
     accessorKey: 'name',

src/lib/auth-types.ts

@@ -2,3 +2,5 @@ import type { auth } from './auth';
 
 // https://www.better-auth.com/docs/concepts/typescript#additional-fields
 export type Session = typeof auth.$Infer.Session;
+
+export type User = typeof auth.$Infer.Session.user;

src/lib/auth.ts

@@ -108,8 +108,12 @@ export const auth = betterAuth({
   },
   user: {
     // https://www.better-auth.com/docs/concepts/database#extending-core-schema
-    // additionalFields: {
-    // },
+    additionalFields: {
+      customerId: {
+        type: 'string',
+        required: false,
+      },
+    },
     // https://www.better-auth.com/docs/concepts/users-accounts#delete-user
     deleteUser: {
       enabled: true,