feat: new package report, move exisiting report code from conversations pkg to report package

- new sla performance overview cards.

Author: abhinavxd

cmd/conversation.go

@@ -549,30 +549,6 @@ func handleUpdateContactCustomAttributes(r *fastglue.Request) error {
 	return r.SendEnvelope(true)
 }
 
-// handleDashboardCounts retrieves general dashboard counts for all users.
-func handleDashboardCounts(r *fastglue.Request) error {
-	var (
-		app = r.Context.(*App)
-	)
-	counts, err := app.conversation.GetDashboardCounts(0, 0)
-	if err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-	return r.SendEnvelope(counts)
-}
-
-// handleDashboardCharts retrieves general dashboard chart data.
-func handleDashboardCharts(r *fastglue.Request) error {
-	var (
-		app = r.Context.(*App)
-	)
-	charts, err := app.conversation.GetDashboardChart(0, 0)
-	if err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-	return r.SendEnvelope(charts)
-}
-
 // enforceConversationAccess fetches the conversation and checks if the user has access to it.
 func enforceConversationAccess(app *App, uuid string, user umodels.User) (*cmodels.Conversation, error) {
 	conversation, err := app.conversation.GetConversation(0, uuid)

cmd/handlers.go

@@ -159,8 +159,9 @@ func initHandlers(g *fastglue.Fastglue, hub *ws.Hub) {
 	g.DELETE("/api/v1/roles/{id}", perm(handleDeleteRole, "roles:manage"))
 
 	// Reports.
-	g.GET("/api/v1/reports/overview/counts", perm(handleDashboardCounts, "reports:manage"))
-	g.GET("/api/v1/reports/overview/charts", perm(handleDashboardCharts, "reports:manage"))
+	g.GET("/api/v1/reports/overview/sla", perm(handleOverviewSLA, "reports:manage"))
+	g.GET("/api/v1/reports/overview/counts", perm(handleOverviewCounts, "reports:manage"))
+	g.GET("/api/v1/reports/overview/charts", perm(handleOverviewCharts, "reports:manage"))
 
 	// Templates.
 	g.GET("/api/v1/templates", perm(handleGetTemplates, "templates:manage"))

cmd/init.go

@@ -35,6 +35,7 @@ import (
 	notifier "github.com/abhinavxd/libredesk/internal/notification"
 	emailnotifier "github.com/abhinavxd/libredesk/internal/notification/providers/email"
 	"github.com/abhinavxd/libredesk/internal/oidc"
+	"github.com/abhinavxd/libredesk/internal/report"
 	"github.com/abhinavxd/libredesk/internal/role"
 	"github.com/abhinavxd/libredesk/internal/search"
 	"github.com/abhinavxd/libredesk/internal/setting"
@@ -823,6 +824,20 @@ func initActivityLog(db *sqlx.DB, i18n *i18n.I18n) *activitylog.Manager {
 	return m
 }
 
+// initReport inits report manager.
+func initReport(db *sqlx.DB, i18n *i18n.I18n) *report.Manager {
+	lo := initLogger("report")
+	m, err := report.New(report.Opts{
+		DB:   db,
+		Lo:   lo,
+		I18n: i18n,
+	})
+	if err != nil {
+		log.Fatalf("error initializing report manager: %v", err)
+	}
+	return m
+}
+
 // initLogger initializes a logf logger.
 func initLogger(src string) *logf.Logger {
 	lvl, env := ko.MustString("app.log_level"), ko.MustString("app.env")

cmd/main.go

@@ -23,6 +23,7 @@ import (
 	customAttribute "github.com/abhinavxd/libredesk/internal/custom_attribute"
 	"github.com/abhinavxd/libredesk/internal/macro"
 	notifier "github.com/abhinavxd/libredesk/internal/notification"
+	"github.com/abhinavxd/libredesk/internal/report"
 	"github.com/abhinavxd/libredesk/internal/search"
 	"github.com/abhinavxd/libredesk/internal/sla"
 	"github.com/abhinavxd/libredesk/internal/view"
@@ -90,6 +91,7 @@ type App struct {
 	activityLog     *activitylog.Manager
 	notifier        *notifier.Service
 	customAttribute *customAttribute.Manager
+	report          *report.Manager
 
 	// Global state that stores data on an available app update.
 	update *AppUpdate
@@ -224,6 +226,7 @@ func main() {
 		customAttribute: initCustomAttribute(db, i18n),
 		authz:           initAuthz(i18n),
 		view:            initView(db),
+		report:          initReport(db, i18n),
 		csat:            initCSAT(db, i18n),
 		search:          initSearch(db, i18n),
 		role:            initRole(db, i18n),

cmd/report.go

@@ -0,0 +1,45 @@
+package main
+
+import (
+	"strconv"
+
+	"github.com/zerodha/fastglue"
+)
+
+// handleOverviewCounts retrieves general dashboard counts for all users.
+func handleOverviewCounts(r *fastglue.Request) error {
+	var (
+		app = r.Context.(*App)
+	)
+	counts, err := app.report.GetOverViewCounts()
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	return r.SendEnvelope(counts)
+}
+
+// handleOverviewCharts retrieves general dashboard chart data.
+func handleOverviewCharts(r *fastglue.Request) error {
+	var (
+		app     = r.Context.(*App)
+		days, _ = strconv.Atoi(string(r.RequestCtx.QueryArgs().Peek("days")))
+	)
+	charts, err := app.report.GetOverviewChart(days)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	return r.SendEnvelope(charts)
+}
+
+// handleOverviewSLA retrieves SLA data for the dashboard.
+func handleOverviewSLA(r *fastglue.Request) error {
+	var (
+		app     = r.Context.(*App)
+		days, _ = strconv.Atoi(string(r.RequestCtx.QueryArgs().Peek("days")))
+	)
+	sla, err := app.report.GetOverviewSLA(days)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	return r.SendEnvelope(sla)
+}

frontend/src/api/index.js

@@ -281,7 +281,8 @@ const uploadMedia = (data) =>
     }
   })
 const getOverviewCounts = () => http.get('/api/v1/reports/overview/counts')
-const getOverviewCharts = () => http.get('/api/v1/reports/overview/charts')
+const getOverviewCharts = (params) => http.get('/api/v1/reports/overview/charts', { params })
+const getOverviewSLA = (params) => http.get('/api/v1/reports/overview/sla', { params })
 const getLanguage = (lang) => http.get(`/api/v1/lang/${lang}`)
 const createInbox = (data) =>
   http.post('/api/v1/inboxes', data, {
@@ -360,6 +361,7 @@ export default {
   getViewConversations,
   getOverviewCharts,
   getOverviewCounts,
+  getOverviewSLA,
   getConversationParticipants,
   getConversationMessage,
   getConversationMessages,

frontend/src/components/ui/date-filter/DateFilter.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="flex items-center gap-2">
+    <Select v-model="selectedDays" @update:model-value="handleFilterChange">
+      <SelectTrigger class="w-[140px] h-8 text-xs">
+        <SelectValue
+          :placeholder="
+            t('globals.messages.select', {
+              name: t('globals.terms.day', 2)
+            })
+          "
+        />
+      </SelectTrigger>
+      <SelectContent class="text-xs">
+        <SelectItem value="0">{{ $t('globals.terms.today') }}</SelectItem>
+        <SelectItem value="1">{{ $t('filters.last_1_day') }}</SelectItem>
+        <SelectItem value="2">{{ $t('filters.last_2_days') }}</SelectItem>
+        <SelectItem value="7">{{ $t('filters.last_7_days') }}</SelectItem>
+        <SelectItem value="30">{{ $t('filters.last_30_days') }}</SelectItem>
+        <SelectItem value="90">{{ $t('filters.last_90_days') }}</SelectItem>
+        <SelectItem value="custom">{{ $t('filters.custom_days') }}</SelectItem>
+      </SelectContent>
+    </Select>
+    <div v-if="selectedDays === 'custom'" class="flex items-center gap-2">
+      <Input
+        v-model="customDaysInput"
+        type="number"
+        min="1"
+        max="365"
+        :placeholder="$t('filters.days_placeholder')"
+        class="w-20"
+        @blur="handleCustomDaysChange"
+        @keyup.enter="handleCustomDaysChange"
+      />
+      <span class="text-xs text-muted-foreground">{{
+        $t('globals.terms.day', 2).toLowerCase()
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
+import { Input } from '@/components/ui/input'
+
+const { t } = useI18n()
+
+const emit = defineEmits(['filterChange'])
+const selectedDays = ref('30')
+const customDaysInput = ref('')
+
+const handleFilterChange = (value) => {
+  if (value === 'custom') {
+    customDaysInput.value = '30'
+    emit('filterChange', 30)
+  } else {
+    emit('filterChange', parseInt(value))
+  }
+}
+
+const handleCustomDaysChange = () => {
+  const days = parseInt(customDaysInput.value)
+  if (days && days > 0 && days <= 365) {
+    emit('filterChange', days)
+  } else {
+    customDaysInput.value = '30'
+    emit('filterChange', 30)
+  }
+}
+
+handleFilterChange(selectedDays.value)
+</script>

frontend/src/components/ui/date-filter/index.js

@@ -0,0 +1 @@
+export { default as DateFilter } from './DateFilter.vue'

frontend/src/features/reports/DashboardBarChart.vue renamed to frontend/src/features/reports/OverviewBarChart.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="flex flex-1 flex-col gap-x-5 box p-5 space-y-5">
-    <div class="flex items-center space-x-2">
-      <p class="text-2xl flex items-center">{{ title }}</p>
+  <div class="flex flex-1 flex-col gap-5 box p-5">
+    <div class="flex items-center">
+      <p class="text-2xl font-medium">{{ title }}</p>
     </div>
-    <div class="flex justify-between pr-32">
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
       <div
         v-for="(item, key) in filteredCounts"
         :key="key"
-        class="flex flex-col items-center gap-y-2"
+        class="flex flex-col items-center gap-2 text-center"
       >
-        <span class="text-muted-foreground">{{ labels[key] }}</span>
-        <span class="text-2xl font-medium">{{ item }}</span>
+        <span class="text-sm text-muted-foreground">{{ labels[key] }}</span>
+        <span class="text-2xl font-semibold">{{ item }}</span>
       </div>
     </div>
   </div>