feat: added insights badge to event-types

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -71,6 +71,7 @@ type EventTypeGroup = EventTypeGroups[number];
 type EventType = EventTypeGroup["eventTypes"][number];
 
 const LIMIT = 10;
+const BOOKING_LIMIT = 50;
 
 interface InfiniteEventTypeListProps {
   group: InfiniteEventTypeGroup;
@@ -169,6 +170,13 @@ const Item = ({
   const parsedeventTypeColor = parseEventTypeColor(type.eventTypeColor);
   const eventTypeColor =
     parsedeventTypeColor && parsedeventTypeColor[hasDarkTheme ? "darkEventTypeColor" : "lightEventTypeColor"];
+  const totalBookings = trpc.viewer.bookings.get.useQuery({
+    filters: {
+      eventTypeIds: [type.id],
+      status: "past",
+    },
+    limit: BOOKING_LIMIT,
+  }).data?.bookings.length;
 
   const content = () => (
     <div>
@@ -203,7 +211,7 @@ const Item = ({
         {readOnly ? (
           <div>
             {content()}
-            <EventTypeDescription eventType={type} shortenDescription />
+            <EventTypeDescription eventType={type} shortenDescription totalBookings={totalBookings} />
           </div>
         ) : (
           <Link href={`/event-types/${type.id}?tabName=setup`} title={type.title}>
@@ -229,6 +237,7 @@ const Item = ({
             <EventTypeDescription
               eventType={{ ...type, descriptionAsSafeHTML: type.safeDescription }}
               shortenDescription
+              totalBookings={totalBookings}
             />
           </Link>
         )}

apps/web/public/static/locales/en/common.json

@@ -1969,6 +1969,7 @@
   "under_maintenance": "Down for maintenance",
   "under_maintenance_description": "The {{appName}} team are performing scheduled maintenance. If you have any questions, please contact support.",
   "event_type_seats": "{{numberOfSeats}} seats",
+  "event_type_insights": "{{numberOfBookings}} booking",
   "booking_questions_title": "Booking questions",
   "booking_questions_description": "Customize the questions asked on the booking page",
   "add_a_booking_question": "Add a question",

packages/features/eventtypes/components/EventTypeDescription.tsx

@@ -1,4 +1,5 @@
 import type { Prisma } from "@prisma/client";
+import Link from "next/link";
 import { useMemo } from "react";
 import type { z } from "zod";
 
@@ -25,13 +26,15 @@ export type EventTypeDescriptionProps = {
   className?: string;
   shortenDescription?: boolean;
   isPublic?: boolean;
+  totalBookings?: number;
 };
 
 export const EventTypeDescription = ({
   eventType,
   className,
   shortenDescription,
   isPublic,
+  totalBookings,
 }: EventTypeDescriptionProps) => {
   const { t, i18n } = useLocale();
 
@@ -76,6 +79,7 @@ export const EventTypeDescription = ({
               </Badge>
             </li>
           )}
+
           {eventType.schedulingType && eventType.schedulingType !== SchedulingType.MANAGED && (
             <li>
               <Badge variant="gray" startIcon="users">
@@ -134,6 +138,13 @@ export const EventTypeDescription = ({
               </Badge>
             </li>
           ) : null}
+          <li>
+            <Link href={`/insights?isAll=false&filter=event-type&eventTypeId=${eventType.id}`}>
+              <Badge variant="gray" startIcon="chart-bar">
+                <p>{t("event_type_insights", { numberOfBookings: totalBookings })} </p>
+              </Badge>
+            </Link>
+          </li>
         </ul>
       </div>
     </>

packages/features/eventtypes/components/EventTypeLayout.tsx

@@ -190,6 +190,16 @@ function EventTypeSingleLayout({
                 )}
               </>
             )}
+            <Tooltip content={t("insights")} side="bottom" sideOffset={4}>
+              <Button
+                color="secondary"
+                target="_blank"
+                variant="icon"
+                href={`/insights?isAll=false&filter=event-type&eventTypeId=${eventType.id}`}
+                rel="noreferrer"
+                StartIcon="chart-bar"
+              />
+            </Tooltip>
             {!isChildrenManagedEventType && allowDelete && (
               <Button
                 color="destructive"
@@ -232,6 +242,15 @@ function EventTypeSingleLayout({
                   {t("copy_link")}
                 </DropdownItem>
               </DropdownMenuItem>
+              <DropdownMenuItem className="focus:ring-muted">
+                <DropdownItem
+                  type="button"
+                  StartIcon="chart-bar"
+                  href={`/insights?isAll=false&filter=event-type&eventTypeId=${eventType.id}`}>
+                  {t("insights")}
+                </DropdownItem>
+              </DropdownMenuItem>
+
               {allowDelete && (
                 <DropdownMenuItem className="focus:ring-muted">
                   <DropdownItem