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,23 +12,18 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
   });
   const { addItem } = useDashboardStore();
 
-  return (
-    <div>
-      <Dropdown
-        trigger={['click']}
-        disabled={isLoading}
-        menu={{
+  const menu: MenuProps = {
     items: [
       {
         key: 'website',
-              label: 'website',
+        label: 'Website',
         children: websites.map((website) => ({
           key: `website#${website.id}`,
           label: website.name,
           children: [
             {
               key: `website#${website.id}#overview`,
-                    label: 'overview',
+              label: 'Overview',
               onClick: () => {
                 addItem(
                   'websiteOverview',
@@ -37,12 +32,22 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
                 );
               },
             },
+            {
+              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 },
 };