refactor: improve most booked & least booked (#23192)

* refactor: improve most booked & least booked

* add 2 new charts and trpc handlers

* update arg

* update comment

* completed booking filter

* update

* add change in component level and remove unused translations

* current time and accepted status logic handler

* resize some charts

* restore some i18n

* restore i18n

* restore i18n

---------

Co-authored-by: Eunjae Lee <hey@eunjae.dev>

apps/web/modules/insights/insights-view.tsx

@@ -19,6 +19,8 @@ import {
   LowestRatedMembersTable,
   MostBookedTeamMembersTable,
   MostCancelledBookingsTables,
+  MostCompletedTeamMembersTable,
+  LeastCompletedTeamMembersTable,
   PopularEventsTable,
   RecentFeedbackTable,
   TimezoneBadge,
@@ -82,20 +84,23 @@ function InsightsPageContent() {
         </div>
 
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
-          <div className="sm:col-span-2">
-            <PopularEventsTable />
-          </div>
           <MostBookedTeamMembersTable />
           <LeastBookedTeamMembersTable />
+          <MostCompletedTeamMembersTable />
+          <LeastCompletedTeamMembersTable />
         </div>
 
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
           <MostCancelledBookingsTables />
           <HighestNoShowHostTable />
+          <div className="sm:col-span-2">
+            <PopularEventsTable />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
           <HighestRatedMembersTable />
           <LowestRatedMembersTable />
-        </div>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
           <div className="sm:col-span-2">
             <RecentFeedbackTable />
           </div>

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

@@ -2187,6 +2187,10 @@
   "bookings_by_hour": "Bookings by Hour",
   "most_booked_members": "Most Booked",
   "least_booked_members": "Least Booked",
+  "most_bookings_scheduled": "Most Bookings Scheduled",
+  "least_bookings_scheduled": "Least Bookings Scheduled",
+  "most_bookings_completed": "Most Bookings Completed",
+  "least_bookings_completed": "Least Bookings Completed",
   "events_created": "Events Created",
   "events_completed": "Events Completed",
   "events_cancelled": "Events Cancelled",