move back 😏

apps/dashboard/src/components/projects/project-actions.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { api } from '@/app/_trpc/client';
+import { pushModal, showConfirm } from '@/modals';
+import { clipboard } from '@/utils/clipboard';
+import { MoreHorizontal } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+
+import type { IServiceProject } from '@openpanel/db';
+
+import { Button } from '../ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+
+export function ProjectActions(project: Exclude<IServiceProject, null>) {
+  const { id } = project;
+  const router = useRouter();
+  const deletion = api.project.remove.useMutation({
+    onSuccess() {
+      toast('Success', {
+        description: 'Project deleted successfully.',
+      });
+      router.refresh();
+    },
+  });
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuItem onClick={() => clipboard(id)}>
+          Copy project ID
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            pushModal('EditProject', project);
+          }}
+        >
+          Edit
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="text-destructive"
+          onClick={() => {
+            showConfirm({
+              title: 'Delete project',
+              text: 'This will delete all events for this project. This action cannot be undone.',
+              onConfirm() {
+                deletion.mutate({
+                  id,
+                });
+              },
+            });
+          }}
+        >
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/dashboard/src/components/projects/project-card.tsx

@@ -0,0 +1,68 @@
+import { shortNumber } from '@/hooks/useNumerFormatter';
+import Link from 'next/link';
+
+import type { IServiceProject } from '@openpanel/db';
+import { chQuery } from '@openpanel/db';
+
+import { ChartSSR } from '../chart-ssr';
+
+export async function ProjectCard({
+  id,
+  name,
+  organizationSlug,
+}: IServiceProject) {
+  const [chart, [data]] = await Promise.all([
+    chQuery<{ value: number; date: string }>(
+      `SELECT countDistinct(profile_id) as value, toStartOfDay(created_at) as date FROM events WHERE project_id = '${id}' AND name = 'session_start' AND created_at >= now() - interval '1 month' GROUP BY date ORDER BY date ASC`
+    ),
+    chQuery<{ total: number; month: number; day: number }>(
+      `
+        SELECT 
+        (
+          SELECT count(DISTINCT profile_id) as count FROM events WHERE project_id = '${id}'
+        ) as total, 
+        (
+          SELECT count(DISTINCT profile_id) as count FROM events WHERE project_id = '${id}' AND created_at >= now() - interval '1 month'
+        ) as month,
+        (
+          SELECT count(DISTINCT profile_id) as count FROM events WHERE project_id = '${id}' AND created_at >= now() - interval '1 day'
+        ) as day
+      `
+    ),
+  ]);
+
+  return (
+    <Link
+      href={`/${organizationSlug}/${id}`}
+      className="card p-4 inline-flex flex-col gap-2 hover:-translate-y-1 transition-transform"
+    >
+      <div className="font-medium">{name}</div>
+      <div className="aspect-[15/1] -mx-4">
+        <ChartSSR data={chart.map((d) => ({ ...d, date: new Date(d.date) }))} />
+      </div>
+      <div className="flex gap-4 justify-between text-muted-foreground text-sm">
+        <div className="font-medium">Visitors</div>
+        <div className="flex gap-4">
+          <div className="flex flex-col md:flex-row gap-2">
+            <div>Total</div>
+            <span className="text-black font-medium">
+              {shortNumber('en')(data?.total)}
+            </span>
+          </div>
+          <div className="flex flex-col md:flex-row gap-2">
+            <div>Month</div>
+            <span className="text-black font-medium">
+              {shortNumber('en')(data?.month)}
+            </span>
+          </div>
+          <div className="flex flex-col md:flex-row gap-2">
+            <div>24h</div>
+            <span className="text-black font-medium">
+              {shortNumber('en')(data?.day)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { formatDate } from '@/utils/date';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import type { IServiceProject } from '@openpanel/db';
+
+import { ProjectActions } from './project-actions';
+
+export type Project = IServiceProject;
+export const columns: ColumnDef<IServiceProject>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+  },
+  {
+    accessorKey: 'createdAt',
+    header: 'Created at',
+    cell({ row }) {
+      const date = row.original.createdAt;
+      return <div>{formatDate(date)}</div>;
+    },
+  },
+  {
+    id: 'actions',
+    header: 'Actions',
+    cell: ({ row }) => <ProjectActions {...row.original} />,
+  },
+];