Feature/move list to client (#50)

apps/dashboard/src/components/profiles/profile-avatar.tsx

@@ -43,7 +43,7 @@ export function ProfileAvatar({
           size === 'lg'
             ? 'text-lg'
             : size === 'sm'
-              ? 'text-xs'
+              ? 'text-sm'
               : size === 'xs'
                 ? 'text-[8px]'
                 : 'text-base',

apps/dashboard/src/components/profiles/table/columns.tsx

@@ -0,0 +1,102 @@
+import { ProjectLink } from '@/components/links';
+import { SerieIcon } from '@/components/report/chart/SerieIcon';
+import { Tooltiper } from '@/components/ui/tooltip';
+import { formatDateTime, formatTime } from '@/utils/date';
+import { getProfileName } from '@/utils/getters';
+import type { ColumnDef } from '@tanstack/react-table';
+import { isToday } from 'date-fns';
+
+import type { IServiceProfile } from '@openpanel/db';
+
+import { ProfileAvatar } from '../profile-avatar';
+
+export function useColumns(type?: 'profiles' | 'power-users') {
+  const columns: ColumnDef<IServiceProfile>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => {
+        const profile = row.original;
+        return (
+          <ProjectLink
+            href={`/profiles/${profile.id}`}
+            className="flex items-center gap-2 font-medium"
+            title={getProfileName(profile, false)}
+          >
+            <ProfileAvatar size="sm" {...profile} />
+            {getProfileName(profile)}
+          </ProjectLink>
+        );
+      },
+    },
+    {
+      accessorKey: 'country',
+      header: 'Country',
+      cell({ row }) {
+        const { country, city } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={country} />
+            <span className="truncate">{city}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'os',
+      header: 'OS',
+      cell({ row }) {
+        const { os } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={os} />
+            <span className="truncate">{os}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'browser',
+      header: 'Browser',
+      cell({ row }) {
+        const { browser } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={browser} />
+            <span className="truncate">{browser}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Last seen',
+      cell: ({ row }) => {
+        const profile = row.original;
+        return (
+          <Tooltiper asChild content={formatDateTime(profile.createdAt)}>
+            <div className="text-muted-foreground">
+              {isToday(profile.createdAt)
+                ? formatTime(profile.createdAt)
+                : formatDateTime(profile.createdAt)}
+            </div>
+          </Tooltiper>
+        );
+      },
+    },
+  ];
+
+  if (type === 'power-users') {
+    columns.unshift({
+      accessorKey: 'count',
+      header: 'Events',
+      cell: ({ row }) => {
+        const profile = row.original;
+        // @ts-expect-error
+        return <div>{profile.count}</div>;
+      },
+    });
+  }
+
+  return columns;
+}

apps/dashboard/src/components/profiles/table/index.tsx

@@ -0,0 +1,72 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { DataTable } from '@/components/data-table';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import { Pagination } from '@/components/pagination';
+import { Button } from '@/components/ui/button';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { GanttChartIcon } from 'lucide-react';
+
+import type { IServiceProfile } from '@openpanel/db';
+
+import { useColumns } from './columns';
+
+type CommonProps = {
+  type?: 'profiles' | 'power-users';
+  query: UseQueryResult<IServiceProfile[]>;
+};
+type Props =
+  | CommonProps
+  | (CommonProps & {
+      cursor: number;
+      setCursor: Dispatch<SetStateAction<number>>;
+    });
+
+export const ProfilesTable = ({ type, query, ...props }: Props) => {
+  const columns = useColumns(type);
+  const { data, isFetching, isLoading } = query;
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+      </div>
+    );
+  }
+
+  if (data?.length === 0) {
+    return (
+      <FullPageEmptyState title="No profiles here" icon={GanttChartIcon}>
+        <p>Could not find any profiles</p>
+        {'cursor' in props && props.cursor !== 0 && (
+          <Button
+            className="mt-8"
+            variant="outline"
+            onClick={() => props.setCursor((p) => p - 1)}
+          >
+            Go to previous page
+          </Button>
+        )}
+      </FullPageEmptyState>
+    );
+  }
+
+  return (
+    <>
+      <DataTable data={data ?? []} columns={columns} />
+      {'cursor' in props && (
+        <Pagination
+          className="mt-2"
+          setCursor={props.setCursor}
+          cursor={props.cursor}
+          count={Infinity}
+          take={50}
+          loading={isFetching}
+        />
+      )}
+    </>
+  );
+};