feature(dashboard): add ability to filter out events by profile id and ip (#101)

apps/dashboard/src/components/clients/table.tsx

@@ -1,55 +0,0 @@
-import { formatDate } from '@/utils/date';
-import type { ColumnDef } from '@tanstack/react-table';
-
-import type { IServiceClientWithProject } from '@openpanel/db';
-
-import { ACTIONS } from '../data-table';
-import { ClientActions } from './client-actions';
-
-export const columns: ColumnDef<IServiceClientWithProject>[] = [
-  {
-    accessorKey: 'name',
-    header: 'Name',
-    cell: ({ row }) => {
-      return (
-        <div>
-          <div>{row.original.name}</div>
-          <div className=" text-muted-foreground">
-            {row.original.project?.name ?? 'No project'}
-          </div>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: 'id',
-    header: 'Client ID',
-  },
-  {
-    accessorKey: 'cors',
-    header: 'Cors',
-  },
-  {
-    accessorKey: 'secret',
-    header: 'Secret',
-    cell: (info) =>
-      info.getValue() ? (
-        <div className="italic text-muted-foreground">Hidden</div>
-      ) : (
-        'None'
-      ),
-  },
-  {
-    accessorKey: 'createdAt',
-    header: 'Created at',
-    cell({ row }) {
-      const date = row.original.createdAt;
-      return formatDate(date);
-    },
-  },
-  {
-    id: ACTIONS,
-    header: 'Actions',
-    cell: ({ row }) => <ClientActions {...row.original} />,
-  },
-];

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

@@ -0,0 +1,56 @@
+import { EventIcon } from '@/components/events/event-icon';
+import { ProjectLink } from '@/components/links';
+import { SerieIcon } from '@/components/report-chart/common/serie-icon';
+import { TooltipComplete } from '@/components/tooltip-complete';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import { pushModal } from '@/modals';
+import { formatDateTime, formatTime } from '@/utils/date';
+import { getProfileName } from '@/utils/getters';
+import type { ColumnDef } from '@tanstack/react-table';
+import { isToday } from 'date-fns';
+
+import { ACTIONS } from '@/components/data-table';
+import type { IServiceClientWithProject, IServiceEvent } from '@openpanel/db';
+import { ClientActions } from '../client-actions';
+
+export function useColumns() {
+  const number = useNumber();
+  const columns: ColumnDef<IServiceClientWithProject>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => {
+        return <div className="font-medium">{row.original.name}</div>;
+      },
+    },
+    {
+      accessorKey: 'id',
+      header: 'Client ID',
+      cell: ({ row }) => <div className="font-mono">{row.original.id}</div>,
+    },
+    // {
+    //   accessorKey: 'secret',
+    //   header: 'Secret',
+    //   cell: (info) =>
+    //       <div className="italic text-muted-foreground"></div>
+
+    // },
+    {
+      accessorKey: 'createdAt',
+      header: 'Created at',
+      cell({ row }) {
+        const date = row.original.createdAt;
+        return (
+          <div>{isToday(date) ? formatTime(date) : formatDateTime(date)}</div>
+        );
+      },
+    },
+    {
+      id: ACTIONS,
+      header: 'Actions',
+      cell: ({ row }) => <ClientActions {...row.original} />,
+    },
+  ];
+
+  return columns;
+}

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

@@ -0,0 +1,67 @@
+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 { TableSkeleton } from '@/components/ui/table';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { GanttChartIcon, PlusIcon } from 'lucide-react';
+import type { Dispatch, SetStateAction } from 'react';
+
+import type { IServiceClientWithProject } from '@openpanel/db';
+
+import { useAppParams } from '@/hooks/useAppParams';
+import { pushModal } from '@/modals';
+import { useColumns } from './columns';
+
+type Props = {
+  query: UseQueryResult<IServiceClientWithProject[]>;
+  cursor: number;
+  setCursor: Dispatch<SetStateAction<number>>;
+};
+
+export const ClientsTable = ({ query, ...props }: Props) => {
+  const columns = useColumns();
+  const { data, isFetching, isLoading } = query;
+
+  if (isLoading) {
+    return <TableSkeleton cols={columns.length} />;
+  }
+
+  if (data?.length === 0) {
+    return (
+      <FullPageEmptyState title="No clients here" icon={GanttChartIcon}>
+        <p>Could not find any clients</p>
+        <div className="row gap-4 mt-4">
+          {'cursor' in props && props.cursor !== 0 && (
+            <Button
+              className="mt-8"
+              variant="outline"
+              onClick={() => props.setCursor((p) => p - 1)}
+            >
+              Go to previous page
+            </Button>
+          )}
+          <Button icon={PlusIcon} onClick={() => pushModal('AddClient')}>
+            Add client
+          </Button>
+        </div>
+      </FullPageEmptyState>
+    );
+  }
+
+  return (
+    <>
+      <DataTable data={data ?? []} columns={columns} />
+      {'cursor' in props && (
+        <Pagination
+          className="mt-2"
+          setCursor={props.setCursor}
+          cursor={props.cursor}
+          count={Number.POSITIVE_INFINITY}
+          take={50}
+          loading={isFetching}
+        />
+      )}
+    </>
+  );
+};