feat: add dashboard websiteEvent item

src/client/components/dashboard/AddButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Dropdown, Space } from 'antd';
+import { Button, Dropdown, MenuProps, Space } from 'antd';
 import React from 'react';
 import { trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
@@ -12,37 +12,42 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
   });
   const { addItem } = useDashboardStore();
 
-  return (
-    <div>
-      <Dropdown
-        trigger={['click']}
-        disabled={isLoading}
-        menu={{
-          items: [
+  const menu: MenuProps = {
+    items: [
+      {
+        key: 'website',
+        label: 'Website',
+        children: websites.map((website) => ({
+          key: `website#${website.id}`,
+          label: website.name,
+          children: [
             {
-              key: 'website',
-              label: 'website',
-              children: websites.map((website) => ({
-                key: `website#${website.id}`,
-                label: website.name,
-                children: [
-                  {
-                    key: `website#${website.id}#overview`,
-                    label: 'overview',
-                    onClick: () => {
-                      addItem(
-                        'websiteOverview',
-                        website.id,
-                        `${website.name}'s Overview`
-                      );
-                    },
-                  },
-                ],
-              })),
+              key: `website#${website.id}#overview`,
+              label: 'Overview',
+              onClick: () => {
+                addItem(
+                  'websiteOverview',
+                  website.id,
+                  `${website.name}'s Overview`
+                );
+              },
+            },
+            {
+              key: `website#${website.id}#event`,
+              label: 'Events',
+              onClick: () => {
+                addItem('websiteEvent', website.id, `${website.name}'s Event`);
+              },
             },
           ],
-        }}
-      >
+        })),
+      },
+    ],
+  };
+
+  return (
+    <div>
+      <Dropdown trigger={['click']} disabled={isLoading} menu={menu}>
         <Button type="primary" size="large" className="w-32">
           <Space>
             <span>Add</span>

src/client/components/dashboard/items/WebsiteEventItem.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { MetricsTable } from '../../website/MetricsTable';
+import { useGlobalRangeDate } from '../../../hooks/useGlobalRangeDate';
+
+export const WebsiteEventItem: React.FC<{
+  websiteId: string;
+}> = React.memo((props) => {
+  const { startDate, endDate } = useGlobalRangeDate();
+  const startAt = startDate.valueOf();
+  const endAt = endDate.valueOf();
+
+  return (
+    <MetricsTable
+      websiteId={props.websiteId}
+      type="event"
+      title={['Events', 'Actions']}
+      startAt={startAt}
+      endAt={endAt}
+    />
+  );
+});
+WebsiteEventItem.displayName = 'WebsiteEventItem';

src/client/components/dashboard/items/index.tsx

@@ -6,6 +6,7 @@ import { Button, Card } from 'antd';
 import React from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { useEvent } from '../../../hooks/useEvent';
+import { WebsiteEventItem } from './WebsiteEventItem';
 
 interface DashboardGridItemProps {
   item: DashboardItem;
@@ -18,6 +19,8 @@ export const DashboardGridItem: React.FC<DashboardGridItemProps> = React.memo(
     const inner = useMemo(() => {
       if (type === 'websiteOverview') {
         return <WebsiteOverviewItem websiteId={id} />;
+      } else if (type === 'websiteEvent') {
+        return <WebsiteEventItem websiteId={id} />;
       } else {
         return <NotFoundTip />;
       }
@@ -35,6 +38,8 @@ export const DashboardGridItem: React.FC<DashboardGridItemProps> = React.memo(
       <Card
         className="h-full w-full overflow-auto"
         title={title}
+        headStyle={{ padding: 10 }}
+        bodyStyle={{ padding: 10 }}
         extra={
           isEditMode && (
             <Button

src/client/components/website/MetricsTable.tsx

@@ -24,7 +24,7 @@ interface MetricsTableProps {
   endAt: number;
 }
 export const MetricsTable: React.FC<MetricsTableProps> = React.memo((props) => {
-  const workspaceId = useCurrentWorkspaceId()!;
+  const workspaceId = useCurrentWorkspaceId();
   const { websiteId, title, type, startAt, endAt } = props;
 
   const { isLoading, data: metrics = [] } = trpc.website.metrics.useQuery({

src/client/store/dashboard.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { Layouts, Layout } from 'react-grid-layout';
-import { mapValues, without } from 'lodash';
+import { mapValues } from 'lodash';
 import { v1 as uuid } from 'uuid';
 
 export type DashboardItemType =
@@ -74,10 +74,10 @@ export const useDashboardStore = create<DashboardState>((set, get) => ({
 
 export const defaultItemLayout: Record<DashboardItemType, Omit<Layout, 'i'>> = {
   websiteOverview: { x: Infinity, y: Infinity, w: 4, h: 12 },
-  websiteEvent: { x: 0, y: 0, w: 4, h: 2 },
-  monitorHealthBar: { x: 0, y: 0, w: 4, h: 2 },
-  monitorStatus: { x: 0, y: 0, w: 4, h: 2 },
-  monitorChart: { x: 0, y: 0, w: 4, h: 2 },
-  monitorEvent: { x: 0, y: 0, w: 4, h: 2 },
-  serverStatus: { x: 0, y: 0, w: 4, h: 2 },
+  websiteEvent: { x: Infinity, y: Infinity, w: 2, h: 5 },
+  monitorHealthBar: { x: Infinity, y: Infinity, w: 4, h: 2 },
+  monitorStatus: { x: Infinity, y: Infinity, w: 4, h: 2 },
+  monitorChart: { x: Infinity, y: Infinity, w: 4, h: 2 },
+  monitorEvent: { x: Infinity, y: Infinity, w: 4, h: 2 },
+  serverStatus: { x: Infinity, y: Infinity, w: 4, h: 2 },
 };