From 16eba2c7051e86ad40adcd7602e8ab0fba273342 Mon Sep 17 00:00:00 2001
From: mrkarimoff <mrkarimoff99@gmail.com>
Date: Fri, 26 Jan 2024 22:49:29 +0500
Subject: [PATCH] add filter for event table and refactor

---
 .../_components/analytics/AnalyticsView.tsx   | 17 +++-
 .../analytics/EventsTable/Columns.tsx         | 23 +++++
 .../analytics/EventsTable/EventsTable.tsx     | 41 ++++++--
 .../EventsTable}/StackTraceDialog.tsx         |  4 +-
 .../analytics/EventsTable/TableFilter.tsx     | 93 +++++++++++++++++++
 .../analytics/cards/TotalDataExported.tsx     | 15 +++
 .../analytics/cards/TotalErrorsCard.tsx       | 15 +++
 .../errors/ErrorsTable/Columns.tsx            | 56 -----------
 .../errors/ErrorsTable/ErrorsTable.tsx        | 15 ---
 .../app/_components/errors/ErrorsView.tsx     | 13 ---
 .../errors/cards/TotalErrorsCard.tsx          | 10 --
 apps/analytics/app/page.tsx                   | 15 +--
 .../DataTable/data-table-pagination.tsx       |  6 +-
 apps/analytics/components/ExportButton.tsx    |  5 +-
 apps/analytics/components/MetadataDialog.tsx  |  4 +-
 apps/analytics/components/ui/checkbox.tsx     | 30 ++++++
 apps/analytics/db/getErrors.ts                | 18 ----
 apps/analytics/db/getEvents.ts                |  6 --
 apps/analytics/package.json                   |  1 +
 apps/analytics/utils/getTotalDataExported.ts  | 14 +++
 apps/analytics/utils/getTotalErrors.ts        | 14 +++
 pnpm-lock.yaml                                | 31 +++++++
 22 files changed, 293 insertions(+), 153 deletions(-)
 rename apps/analytics/app/_components/{errors/ErrorsTable => analytics/EventsTable}/StackTraceDialog.tsx (65%)
 create mode 100644 apps/analytics/app/_components/analytics/EventsTable/TableFilter.tsx
 create mode 100644 apps/analytics/app/_components/analytics/cards/TotalDataExported.tsx
 create mode 100644 apps/analytics/app/_components/analytics/cards/TotalErrorsCard.tsx
 delete mode 100644 apps/analytics/app/_components/errors/ErrorsTable/Columns.tsx
 delete mode 100644 apps/analytics/app/_components/errors/ErrorsTable/ErrorsTable.tsx
 delete mode 100644 apps/analytics/app/_components/errors/ErrorsView.tsx
 delete mode 100644 apps/analytics/app/_components/errors/cards/TotalErrorsCard.tsx
 create mode 100644 apps/analytics/components/ui/checkbox.tsx
 delete mode 100644 apps/analytics/db/getErrors.ts
 create mode 100644 apps/analytics/utils/getTotalDataExported.ts
 create mode 100644 apps/analytics/utils/getTotalErrors.ts

diff --git a/apps/analytics/app/_components/analytics/AnalyticsView.tsx b/apps/analytics/app/_components/analytics/AnalyticsView.tsx
index c7533a4d..e32024ee 100644
--- a/apps/analytics/app/_components/analytics/AnalyticsView.tsx
+++ b/apps/analytics/app/_components/analytics/AnalyticsView.tsx
@@ -5,8 +5,13 @@ import TotalInterviewsCompletedCard from "./cards/TotalInterviewsCompletedCard";
 import TotalInterviewsStartedCard from "./cards/TotalInterviewsStartedCard";
 import TotalProtocolsInstalledCard from "./cards/TotalProtocolsInstalledCard";
 import RegionsTable from "./RegionsTable/RegionsTable";
+import getEvents from "~/db/getEvents";
+import TotalErrorsCard from "./cards/TotalErrorsCard";
+import TotalDataExported from "./cards/TotalDataExported";
+
+export default async function AnalyticsView() {
+  const events = await getEvents();
 
-export default function AnalyticsView() {
   return (
     <div className="space-y-4">
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
@@ -14,10 +19,14 @@ export default function AnalyticsView() {
         <TotalProtocolsInstalledCard />
         <TotalInterviewsStartedCard />
         <TotalInterviewsCompletedCard />
+        <TotalDataExported />
+        <TotalErrorsCard />
       </div>
-      <div className="grid gap-4 lg:grid-cols-2 sm:grid-cols-1">
-        <EventsTable />
-        <Card>
+      <div className="grid gap-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">
+        <div className="lg:col-span-2">
+          <EventsTable events={events} />
+        </div>
+        <Card className="h-fit">
           <CardHeader>Regions</CardHeader>
           <CardContent>
             <RegionsTable />
diff --git a/apps/analytics/app/_components/analytics/EventsTable/Columns.tsx b/apps/analytics/app/_components/analytics/EventsTable/Columns.tsx
index 11d449af..91bc7274 100644
--- a/apps/analytics/app/_components/analytics/EventsTable/Columns.tsx
+++ b/apps/analytics/app/_components/analytics/EventsTable/Columns.tsx
@@ -4,6 +4,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "~/components/DataTable/column-header";
 import { MetadataDialog } from "~/components/MetadataDialog";
 import type { Event } from "~/db/getEvents";
+import { StackTraceDialog } from "./StackTraceDialog";
 
 export const columns: ColumnDef<Event>[] = [
   {
@@ -32,6 +33,28 @@ export const columns: ColumnDef<Event>[] = [
       return <div className="break-all">{row.original.installationId}</div>;
     },
   },
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Name" />
+    ),
+  },
+  {
+    accessorKey: "message",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Message" />
+    ),
+  },
+  {
+    accessorKey: "stack",
+    header: "",
+    cell: ({ row }) =>
+      row.original.stack && (
+        <div className="min-w-max">
+          <StackTraceDialog error={row.original} />
+        </div>
+      ),
+  },
   {
     accessorKey: "metadata",
     header: "",
diff --git a/apps/analytics/app/_components/analytics/EventsTable/EventsTable.tsx b/apps/analytics/app/_components/analytics/EventsTable/EventsTable.tsx
index cd8b25c6..9b7a57a3 100644
--- a/apps/analytics/app/_components/analytics/EventsTable/EventsTable.tsx
+++ b/apps/analytics/app/_components/analytics/EventsTable/EventsTable.tsx
@@ -1,21 +1,48 @@
-// EventsTable.tsx
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
 import { DataTable } from "~/components/DataTable/data-table";
 import ExportButton from "~/components/ExportButton";
-import getEvents from "~/db/getEvents";
+import { Event } from "~/db/getEvents";
 import { columns } from "./Columns";
+import TableFilter from "./TableFilter";
+
+export type EventType = {
+  text: string;
+  isSelected: boolean;
+};
+
+export default function EventsTable({ events }: { events: Event[] }) {
+  const [eventTypes, setEventTypes] = useState<EventType[]>([]);
+
+  useEffect(() => {
+    const eventTypesMap = new Map<string, EventType>();
+    events.forEach((event) =>
+      eventTypesMap.set(event.type, { text: event.type, isSelected: true })
+    );
 
-export default async function EventsTable() {
-  const events = await getEvents();
+    setEventTypes([...Array.from(eventTypesMap.values())]);
+  }, [events]);
+
+  const filteredEvents = useMemo(() => {
+    const filters = eventTypes
+      .filter((type) => type.isSelected)
+      .map((type) => type.text);
+
+    return events.filter((event) => filters.includes(event.type));
+  }, [eventTypes, events]);
 
   return (
     <div>
-      <div className="flex justify-between">
+      <TableFilter eventTypes={eventTypes} setEventTypes={setEventTypes} />
+
+      <div className="flex justify-between items-center mt-2">
         <h2>Events</h2>
         <ExportButton data={events} filename="events.csv" />
       </div>
 
-      <div className="mt-4">
-        <DataTable columns={columns} data={events} pagination={true} />
+      <div className="mt-2">
+        <DataTable columns={columns} data={filteredEvents} pagination={true} />
       </div>
     </div>
   );
diff --git a/apps/analytics/app/_components/errors/ErrorsTable/StackTraceDialog.tsx b/apps/analytics/app/_components/analytics/EventsTable/StackTraceDialog.tsx
similarity index 65%
rename from apps/analytics/app/_components/errors/ErrorsTable/StackTraceDialog.tsx
rename to apps/analytics/app/_components/analytics/EventsTable/StackTraceDialog.tsx
index e3e063e8..ed049cf2 100644
--- a/apps/analytics/app/_components/errors/ErrorsTable/StackTraceDialog.tsx
+++ b/apps/analytics/app/_components/analytics/EventsTable/StackTraceDialog.tsx
@@ -1,7 +1,7 @@
 import { DialogButton } from "~/components/DialogButton";
-import { type ErrorEvent } from "~/db/getErrors";
+import { Event } from "~/db/getEvents";
 
-export function StackTraceDialog({ error }: { error: ErrorEvent }) {
+export function StackTraceDialog({ error }: { error: Event }) {
   return (
     <DialogButton
       buttonLabel="Stack Trace"
diff --git a/apps/analytics/app/_components/analytics/EventsTable/TableFilter.tsx b/apps/analytics/app/_components/analytics/EventsTable/TableFilter.tsx
new file mode 100644
index 00000000..f4c60858
--- /dev/null
+++ b/apps/analytics/app/_components/analytics/EventsTable/TableFilter.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { Button } from "~/components/ui/button";
+import { Checkbox } from "~/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { EventType } from "./EventsTable";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
+
+type TableFilterProps = {
+  eventTypes: EventType[];
+  setEventTypes: Dispatch<SetStateAction<EventType[]>>;
+};
+
+const TableFilter = ({ eventTypes, setEventTypes }: TableFilterProps) => {
+  const [allSelected, setAllSelected] = useState(true);
+
+  useEffect(() => {
+    const updatedEventTypes = eventTypes.map((t) => ({
+      ...t,
+      isSelected: allSelected,
+    }));
+    setEventTypes(updatedEventTypes);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allSelected]);
+
+  const handleCheckedChange = (value: boolean, currentType: string) => {
+    const updatedEventTypes = eventTypes.map((t) => {
+      if (t.text === currentType) {
+        return { ...t, isSelected: value };
+      }
+      return t;
+    });
+
+    // If all event types are selected, set allSelected to true
+    if (updatedEventTypes.every((t) => t.isSelected)) {
+      setAllSelected(true);
+      return;
+    }
+
+    // If no event types are selected, set allSelected to false
+    if (updatedEventTypes.every((t) => !t.isSelected)) {
+      setAllSelected(false);
+      return;
+    }
+
+    setEventTypes(updatedEventTypes);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Event Types</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-52 ml-12">
+        <DropdownMenuLabel>Select events</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        <div className="space-y-3">
+          <label className="text-sm flex items-center gap-3 pl-2 transition-colors hover:bg-muted p-1 rounded-md">
+            <Checkbox
+              checked={allSelected}
+              onCheckedChange={(val) => setAllSelected(Boolean(val))}
+            />
+            <span>All</span>
+          </label>
+
+          {eventTypes.map((type) => (
+            <label
+              key={type.text}
+              className="text-sm flex items-center gap-3 pl-2 transition-colors hover:bg-muted p-1 rounded-md"
+            >
+              <Checkbox
+                checked={type.isSelected}
+                onCheckedChange={(val) =>
+                  handleCheckedChange(Boolean(val), type.text)
+                }
+              />
+              <span>{type.text}</span>
+            </label>
+          ))}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default TableFilter;
diff --git a/apps/analytics/app/_components/analytics/cards/TotalDataExported.tsx b/apps/analytics/app/_components/analytics/cards/TotalDataExported.tsx
new file mode 100644
index 00000000..8325614d
--- /dev/null
+++ b/apps/analytics/app/_components/analytics/cards/TotalDataExported.tsx
@@ -0,0 +1,15 @@
+import { getTotalInterviewsStarted } from "~/utils/getTotalInterviewsStarted";
+import { SummaryCard } from "~/components/SummaryCard";
+
+const TotalDataExported = async () => {
+  const totalInterviewsStarted = await getTotalInterviewsStarted();
+  return (
+    <SummaryCard
+      title="Data Exported"
+      value={totalInterviewsStarted}
+      description="Total data exported across all instances of Fresco"
+    />
+  );
+};
+
+export default TotalDataExported;
diff --git a/apps/analytics/app/_components/analytics/cards/TotalErrorsCard.tsx b/apps/analytics/app/_components/analytics/cards/TotalErrorsCard.tsx
new file mode 100644
index 00000000..fb0a3757
--- /dev/null
+++ b/apps/analytics/app/_components/analytics/cards/TotalErrorsCard.tsx
@@ -0,0 +1,15 @@
+import { SummaryCard } from "~/components/SummaryCard";
+import { getTotalErrors } from "~/utils/getTotalErrors";
+
+const TotalErrorsCard = async () => {
+  const totalErrors = await getTotalErrors();
+  return (
+    <SummaryCard
+      title="Number of Errors"
+      value={totalErrors}
+      description="Total number of errors sent from all instances of Fresco"
+    />
+  );
+};
+
+export default TotalErrorsCard;
diff --git a/apps/analytics/app/_components/errors/ErrorsTable/Columns.tsx b/apps/analytics/app/_components/errors/ErrorsTable/Columns.tsx
deleted file mode 100644
index 26f265df..00000000
--- a/apps/analytics/app/_components/errors/ErrorsTable/Columns.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-
-import { ColumnDef } from "@tanstack/react-table";
-import { StackTraceDialog } from "~/app/_components/errors/ErrorsTable/StackTraceDialog";
-import { DataTableColumnHeader } from "~/components/DataTable/column-header";
-import { MetadataDialog } from "~/components/MetadataDialog";
-import { type ErrorEvent } from "~/db/getErrors";
-
-export const columns: ColumnDef<ErrorEvent>[] = [
-  {
-    accessorKey: "name",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Name" />
-    ),
-  },
-  {
-    accessorKey: "message",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Message" />
-    ),
-  },
-  {
-    accessorKey: "installationId",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Installation Id" />
-    ),
-  },
-  {
-    accessorKey: "timestamp",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Timestamp" />
-    ),
-  },
-  {
-    accessorKey: "stack",
-    header: "",
-    cell: ({ row }) => {
-      return (
-        <div className="min-w-max">
-          <StackTraceDialog error={row.original} />
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "metadata",
-    header: "",
-    cell: ({ row }) => {
-      return (
-        <div className="min-w-max">
-          <MetadataDialog event={row.original} />
-        </div>
-      );
-    },
-  },
-];
diff --git a/apps/analytics/app/_components/errors/ErrorsTable/ErrorsTable.tsx b/apps/analytics/app/_components/errors/ErrorsTable/ErrorsTable.tsx
deleted file mode 100644
index 80fd958c..00000000
--- a/apps/analytics/app/_components/errors/ErrorsTable/ErrorsTable.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { DataTable } from "~/components/DataTable/data-table";
-import getErrors from "~/db/getErrors";
-import { columns } from "./Columns";
-import ExportButton from "~/components/ExportButton";
-
-export default async function ErrorsTable() {
-  const errors = await getErrors();
-
-  return (
-    <>
-      <ExportButton data={errors} filename="errors.csv" />
-      <DataTable columns={columns} data={errors} pagination={true} />
-    </>
-  );
-}
diff --git a/apps/analytics/app/_components/errors/ErrorsView.tsx b/apps/analytics/app/_components/errors/ErrorsView.tsx
deleted file mode 100644
index 45d81e43..00000000
--- a/apps/analytics/app/_components/errors/ErrorsView.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import ErrorsTable from "./ErrorsTable/ErrorsTable";
-import TotalErrorsCard from "./cards/TotalErrorsCard";
-
-export default function ErrorsView() {
-  return (
-    <div className="space-y-4">
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <TotalErrorsCard />
-      </div>
-      <ErrorsTable />
-    </div>
-  );
-}
diff --git a/apps/analytics/app/_components/errors/cards/TotalErrorsCard.tsx b/apps/analytics/app/_components/errors/cards/TotalErrorsCard.tsx
deleted file mode 100644
index 50246c5a..00000000
--- a/apps/analytics/app/_components/errors/cards/TotalErrorsCard.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { SummaryCard } from "~/components/SummaryCard";
-import getErrors from "~/db/getErrors";
-
-const TotalErrorsCard = async () => {
-  const errors = await getErrors();
-  const totalErrors = errors.length;
-  return <SummaryCard title="Number of Errors" value={totalErrors} />;
-};
-
-export default TotalErrorsCard;
diff --git a/apps/analytics/app/page.tsx b/apps/analytics/app/page.tsx
index 57e5fde4..74d54fbe 100644
--- a/apps/analytics/app/page.tsx
+++ b/apps/analytics/app/page.tsx
@@ -1,7 +1,5 @@
 import { UserButton } from "@clerk/nextjs";
 import AnalyticsView from "~/app/_components/analytics/AnalyticsView";
-import ErrorsView from "~/app/_components/errors/ErrorsView";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 import UserManagementDialog from "./_components/users/UserManagementDialog";
 
 export default function DashboardPage() {
@@ -16,18 +14,7 @@ export default function DashboardPage() {
           </div>
         </div>
 
-        <Tabs defaultValue="analytics" className="space-y-4">
-          <TabsList>
-            <TabsTrigger value="analytics">Analytics</TabsTrigger>
-            <TabsTrigger value="errors">Errors</TabsTrigger>
-          </TabsList>
-          <TabsContent value="analytics">
-            <AnalyticsView />
-          </TabsContent>
-          <TabsContent value="errors">
-            <ErrorsView />
-          </TabsContent>
-        </Tabs>
+        <AnalyticsView />
       </div>
     </main>
   );
diff --git a/apps/analytics/components/DataTable/data-table-pagination.tsx b/apps/analytics/components/DataTable/data-table-pagination.tsx
index 356c62c1..f731c9cf 100644
--- a/apps/analytics/components/DataTable/data-table-pagination.tsx
+++ b/apps/analytics/components/DataTable/data-table-pagination.tsx
@@ -25,11 +25,11 @@ export function DataTablePagination<TData>({
 }: DataTablePaginationProps<TData>) {
   return (
     <div className="flex items-center justify-between px-2">
-      <div className="flex-1 text-sm text-muted-foreground">
+      {/* <div className="flex-1 text-sm text-muted-foreground">
         {table.getFilteredSelectedRowModel().rows.length} of{" "}
         {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center space-x-6 lg:space-x-8">
+      </div> */}
+      <div className="flex items-center justify-center gap-3 lg:gap-4 flex-wrap">
         <div className="flex items-center space-x-2">
           <p className="text-sm font-medium">Rows per page</p>
           <Select
diff --git a/apps/analytics/components/ExportButton.tsx b/apps/analytics/components/ExportButton.tsx
index 130cde30..7d7aab48 100644
--- a/apps/analytics/components/ExportButton.tsx
+++ b/apps/analytics/components/ExportButton.tsx
@@ -1,13 +1,12 @@
 "use client";
 
+import { Download } from "lucide-react";
 import Papa from "papaparse";
 import { Button } from "~/components/ui/button";
-import { Download } from "lucide-react";
 import { type Event } from "~/db/getEvents";
-import { type ErrorEvent } from "~/db/getErrors";
 
 interface ExportButtonProps {
-  data: (Event | ErrorEvent)[];
+  data: Event[];
   filename: string;
 }
 
diff --git a/apps/analytics/components/MetadataDialog.tsx b/apps/analytics/components/MetadataDialog.tsx
index ab6eb6cf..279956dc 100644
--- a/apps/analytics/components/MetadataDialog.tsx
+++ b/apps/analytics/components/MetadataDialog.tsx
@@ -1,8 +1,8 @@
 import { DialogButton } from "~/components/DialogButton";
-import { type ErrorEvent } from "~/db/getErrors";
+
 import { type Event } from "~/db/getEvents";
 
-export function MetadataDialog({ event }: { event: Event | ErrorEvent }) {
+export function MetadataDialog({ event }: { event: Event }) {
   return (
     <DialogButton
       buttonLabel="Metadata"
diff --git a/apps/analytics/components/ui/checkbox.tsx b/apps/analytics/components/ui/checkbox.tsx
new file mode 100644
index 00000000..159eae58
--- /dev/null
+++ b/apps/analytics/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "~/utils/shadcn"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/apps/analytics/db/getErrors.ts b/apps/analytics/db/getErrors.ts
deleted file mode 100644
index bb664bea..00000000
--- a/apps/analytics/db/getErrors.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { db } from "./db";
-
-export default async function getErrors() {
-  try {
-    const errorEvents = await db.query.eventsTable.findMany({
-      where: (events, { eq }) => eq(events.type, "Error"),
-      orderBy: (events, { desc }) => [desc(events.timestamp)],
-    });
-
-    return errorEvents;
-  } catch (error) {
-    console.error("Error getting events", error);
-    return [];
-  }
-}
-
-type ErrorEvents = Awaited<ReturnType<typeof getErrors>>;
-export type ErrorEvent = ErrorEvents[0];
diff --git a/apps/analytics/db/getEvents.ts b/apps/analytics/db/getEvents.ts
index 027a9a17..54c1a6f7 100644
--- a/apps/analytics/db/getEvents.ts
+++ b/apps/analytics/db/getEvents.ts
@@ -3,13 +3,7 @@ import { db } from "./db";
 export default async function getEvents() {
   try {
     const events = await db.query.eventsTable.findMany({
-      where: (events, { ne }) => ne(events.type, "Error"),
       orderBy: (events, { desc }) => [desc(events.timestamp)],
-      columns: {
-        name: false,
-        message: false,
-        stack: false,
-      },
     });
 
     return events;
diff --git a/apps/analytics/package.json b/apps/analytics/package.json
index ed8e1b49..24ea4f38 100644
--- a/apps/analytics/package.json
+++ b/apps/analytics/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@clerk/nextjs": "^4.26.2",
     "@codaco/analytics": "workspace:*",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-select": "^2.0.0",
diff --git a/apps/analytics/utils/getTotalDataExported.ts b/apps/analytics/utils/getTotalDataExported.ts
new file mode 100644
index 00000000..f8ec8cc3
--- /dev/null
+++ b/apps/analytics/utils/getTotalDataExported.ts
@@ -0,0 +1,14 @@
+import getEvents from "~/db/getEvents";
+
+export const getTotalDataExported = async () => {
+  const events = await getEvents();
+
+  const nDataExported = events.reduce((count, event) => {
+    if (event.type === "DataExported") {
+      return count + 1;
+    }
+    return count;
+  }, 0);
+
+  return nDataExported;
+};
diff --git a/apps/analytics/utils/getTotalErrors.ts b/apps/analytics/utils/getTotalErrors.ts
new file mode 100644
index 00000000..b46d13bd
--- /dev/null
+++ b/apps/analytics/utils/getTotalErrors.ts
@@ -0,0 +1,14 @@
+import getEvents from "~/db/getEvents";
+
+export const getTotalErrors = async () => {
+  const events = await getEvents();
+
+  const nErrors = events.reduce((count, event) => {
+    if (event.type === "Error") {
+      return count + 1;
+    }
+    return count;
+  }, 0);
+
+  return nErrors;
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b37be21e..70f4bbc8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ importers:
       '@codaco/analytics':
         specifier: workspace:*
         version: link:../../packages/analytics
+      '@radix-ui/react-checkbox':
+        specifier: ^1.0.4
+        version: 1.0.4(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-dialog':
         specifier: ^1.0.5
         version: 1.0.5(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
@@ -1484,6 +1487,34 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.2
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@types/react': 18.2.14
+      '@types/react-dom': 18.2.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies: