update version to 0.8.0-beta in package.json

remove caution note about alpha status from README.md

.github/ISSUE_TEMPLATE/confirmed-bug.md

@@ -0,0 +1,16 @@
+---
+name: Confirmed Bug Report
+about: Report a confirmed bug in Libredesk
+title: "[Bug] <brief summary>"
+labels: bug
+assignees: ""
+---
+
+**Version:**
+- libredesk: [eg: v0.7.0]
+
+**Description of the bug and steps to reproduce:**
+A clear and concise description of what the bug is.
+
+**Logs / Screenshots:**
+Attach any relevant logs or screenshots to help diagnose the issue.

.github/ISSUE_TEMPLATE/possible-bug.md

@@ -0,0 +1,16 @@
+---
+name: Possible Bug Report
+about: Something in Libredesk might be broken but needs confirmation
+title: "[Possible Bug] <brief summary>"
+labels: bug, needs-investigation
+assignees: ""
+---
+
+**Version:**
+ - libredesk: [eg: v0.7.0]
+ 
+**Description of the bug and steps to reproduce:**
+A clear and concise description of what the bug is.
+
+**Logs / Screenshots:**
+Attach any relevant logs or screenshots to help diagnose the issue.

.github/workflows/crowdin.yml

@@ -12,6 +12,8 @@ on:
 jobs:
   crowdin:
     runs-on: ubuntu-latest
+    # Only run on the original repository, not forks
+    if: github.event.repository.fork == false
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/frontend-ci.yml

@@ -53,6 +53,11 @@ jobs:
       - name: Configure app
         run: |
           cp config.sample.toml config.toml
+          sed -i 's/host = "db"/host = "127.0.0.1"/' config.toml
+          sed -i 's/address = "redis:6379"/address = "localhost:6379"/' config.toml
+
+      - name: Run unit tests for frontend
+        run: cd frontend && pnpm test:run
 
       - name: Install db schema and run tests
         env:

.github/workflows/github-pages.yml

@@ -1,31 +0,0 @@
-name: Deploy MkDocs
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: actions/setup-python@v4
-        with:
-          python-version: 3.x
-
-      - run: pip install mkdocs-material
-
-      - run: |
-          if [ -f requirements.txt ]; then
-            pip install -r requirements.txt;
-          fi
-
-      - run: cd docs && mkdocs build
-
-      - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./docs/site

Makefile

@@ -38,7 +38,7 @@ frontend-build: install-deps
 .PHONY: run-backend
 run-backend:
 	@echo "→ Running backend..."
-	CGO_ENABLED=0 go run -ldflags="-s -w -X 'main.buildString=${BUILDSTR}' -X 'main.versionString=${VERSION}' -X 'main.frontendDir=frontend/dist'" cmd/*.go
+	CGO_ENABLED=0 go run -ldflags="-s -w -X 'main.buildString=${BUILDSTR}' -X 'main.versionString=${VERSION}' -X 'github.com/abhinavxd/libredesk/internal/version.Version=${VERSION}' -X 'main.frontendDir=frontend/dist'" cmd/*.go
 
 # Run the JS frontend server in development mode.
 .PHONY: run-frontend
@@ -52,8 +52,8 @@ run-frontend:
 .PHONY: build-backend
 build-backend: $(STUFFBIN)
 	@echo "→ Building backend..."
-	@CGO_ENABLED=0 go build -a\
-		-ldflags="-X 'main.buildString=${BUILDSTR}' -X 'main.versionString=${VERSION}' -s -w" \
+	@CGO_ENABLED=0 go build -a \
+		-ldflags="-X 'main.buildString=${BUILDSTR}' -X 'main.versionString=${VERSION}' -X 'github.com/abhinavxd/libredesk/internal/version.Version=${VERSION}' -s -w" \
 		-o ${BIN} cmd/*.go
 
 # Main build target: builds both frontend and backend, then stuffs static assets into the binary.

README.md

@@ -3,20 +3,17 @@
 
 # Libredesk
 
-Open source, self-hosted customer support desk. Single binary app.
+Modern, open source, self-hosted customer support desk. Single binary app. 
+
+![image](https://libredesk.io/hero.png)
+
 
 Visit [libredesk.io](https://libredesk.io) for more info. Check out the [**Live demo**](https://demo.libredesk.io/).
 
-![image](https://github.com/user-attachments/assets/8e434a02-8b33-41c8-8433-3c98d1d5b834)
-
-
-
-> **CAUTION:** This project is currently in **alpha**. Features and APIs may change and are not yet fully tested.
-
 ## Features
 
-- **Multi Inbox**  
-  Libredesk supports multiple inboxes, letting you manage conversations across teams effortlessly.
+- **Multi Shared Inbox**  
+  Libredesk supports multiple shared inboxes, letting you manage conversations across teams effortlessly.
 - **Granular Permissions**  
   Create custom roles with granular permissions for teams and individual agents.
 - **Smart Automation**  
@@ -31,14 +28,16 @@ Visit [libredesk.io](https://libredesk.io) for more info. Check out the [**Live
   Distribute workload with auto assignment rules. Auto-assign conversations based on agent capacity or custom criteria.
 - **SLA Management**  
   Set and track response time targets. Get notified when conversations are at risk of breaching SLA commitments.
-- **Business Intelligence**  
-  Connect your favorite BI tools like Metabase and create custom dashboards and reports with your support data—without lock-ins.
-- **AI-Assisted Response Rewrite**  
+- **Custom attributes**  
+  Create custom attributes for contacts or conversations such as the subscription plan or the date of their first purchase. 
+- **AI-Assist**  
   Instantly rewrite responses with AI to make them more friendly, professional, or polished.
 - **Activity logs**  
   Track all actions performed by agents and admins—updates and key events across the system—for auditing and accountability.
+- **Webhooks**  
+  Integrate with external systems using real-time HTTP notifications for conversation and message events.
 - **Command Bar**  
-  Opens with a simple shortcut (CTRL+k) and lets you quickly perform actions on conversations.
+  Opens with a simple shortcut (CTRL+K) and lets you quickly perform actions on conversations.
 
 And more checkout - [libredesk.io](https://libredesk.io)
 
@@ -57,8 +56,6 @@ curl -LO https://github.com/abhinavxd/libredesk/raw/main/config.sample.toml
 # Copy the config.sample.toml to config.toml and edit it as needed.
 cp config.sample.toml config.toml
 
-# Edit config.toml and find commented lines containing "docker compose". Replace the values in the lines below those comments with service names instead of IP addresses.
-
 # Run the services in the background.
 docker compose up -d
 
@@ -66,9 +63,9 @@ docker compose up -d
 docker exec -it libredesk_app ./libredesk --set-system-user-password
 ```
 
-Go to `http://localhost:9000` and login with username `System` and the password you set using the --set-system-user-password command.
+Go to `http://localhost:9000` and login with username `System` and the password you set using the `--set-system-user-password` command.
 
-See [installation docs](https://libredesk.io/docs/installation/)
+See [installation docs](https://docs.libredesk.io/getting-started/installation)
 
 __________________
 
@@ -79,12 +76,17 @@ __________________
 - Run `./libredesk --set-system-user-password` to set the password for the System user.
 - Run `./libredesk` and visit `http://localhost:9000` and login with username `System` and the password you set using the --set-system-user-password command.
 
-See [installation docs](https://libredesk.io/docs/installation)
+See [installation docs](https://docs.libredesk.io/getting-started/installation)
 __________________
 
 
 ## Developers
-If you are interested in contributing, refer to the [developer setup](https://libredesk.io/docs/developer-setup/). The backend is written in Go and the frontend is Vue js 3 with Shadcn for UI components.
+If you are interested in contributing, refer to the [developer setup](https://docs.libredesk.io/contributing/developer-setup). The backend is written in Go and the frontend is Vue js 3 with Shadcn for UI components.
+
+## Development Status
+
+Libredesk is under active development.  
+Track roadmap and progress on the GitHub Project Board:   [https://github.com/users/abhinavxd/projects/1](https://github.com/users/abhinavxd/projects/1)
 
 
 ## Translators

cmd/ai.go

@@ -5,6 +5,11 @@ import (
 	"github.com/zerodha/fastglue"
 )
 
+type aiCompletionReq struct {
+	PromptKey string `json:"prompt_key"`
+	Content   string `json:"content"`
+}
+
 type providerUpdateReq struct {
 	Provider string `json:"provider"`
 	APIKey   string `json:"api_key"`
@@ -13,11 +18,15 @@ type providerUpdateReq struct {
 // handleAICompletion handles AI completion requests
 func handleAICompletion(r *fastglue.Request) error {
 	var (
-		app       = r.Context.(*App)
-		promptKey = string(r.RequestCtx.PostArgs().Peek("prompt_key"))
-		content   = string(r.RequestCtx.PostArgs().Peek("content"))
+		app = r.Context.(*App)
+		req = aiCompletionReq{}
 	)
-	resp, err := app.ai.Completion(promptKey, content)
+
+	if err := r.Decode(&req, "json"); err != nil {
+		return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil))
+	}
+
+	resp, err := app.ai.Completion(req.PromptKey, req.Content)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}

cmd/automation.go

@@ -9,6 +9,10 @@ import (
 	"github.com/zerodha/fastglue"
 )
 
+type updateAutomationRuleExecutionModeReq struct {
+	Mode string `json:"mode"`
+}
+
 // handleGetAutomationRules gets all automation rules
 func handleGetAutomationRules(r *fastglue.Request) error {
 	var (
@@ -41,10 +45,11 @@ func handleToggleAutomationRule(r *fastglue.Request) error {
 		app   = r.Context.(*App)
 		id, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	)
-	if err := app.automation.ToggleRule(id); err != nil {
+	toggledRule, err := app.automation.ToggleRule(id)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(toggledRule)
 }
 
 // handleUpdateAutomationRule updates an automation rule
@@ -62,10 +67,11 @@ func handleUpdateAutomationRule(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
-	if err = app.automation.UpdateRule(id, rule); err != nil {
+	updatedRule, err := app.automation.UpdateRule(id, rule)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(updatedRule)
 }
 
 // handleCreateAutomationRule creates a new automation rule
@@ -77,10 +83,11 @@ func handleCreateAutomationRule(r *fastglue.Request) error {
 	if err := r.Decode(&rule, "json"); err != nil {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
-	if err := app.automation.CreateRule(rule); err != nil {
+	createdRule, err := app.automation.CreateRule(rule)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(createdRule)
 }
 
 // handleDeleteAutomationRule deletes an automation rule
@@ -118,14 +125,20 @@ func handleUpdateAutomationRuleWeights(r *fastglue.Request) error {
 // handleUpdateAutomationRuleExecutionMode updates the execution mode of the automation rules for a given type
 func handleUpdateAutomationRuleExecutionMode(r *fastglue.Request) error {
 	var (
-		app  = r.Context.(*App)
-		mode = string(r.RequestCtx.PostArgs().Peek("mode"))
+		app = r.Context.(*App)
+		req = updateAutomationRuleExecutionModeReq{}
 	)
-	if mode != amodels.ExecutionModeAll && mode != amodels.ExecutionModeFirstMatch {
+
+	if err := r.Decode(&req, "json"); err != nil {
+		return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil))
+	}
+
+	if req.Mode != amodels.ExecutionModeAll && req.Mode != amodels.ExecutionModeFirstMatch {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.T("automation.invalidRuleExecutionMode"), nil, envelope.InputError)
 	}
+
 	// Only new conversation rules can be updated as they are the only ones that have execution mode.
-	if err := app.automation.UpdateRuleExecutionMode(amodels.RuleTypeNewConversation, mode); err != nil {
+	if err := app.automation.UpdateRuleExecutionMode(amodels.RuleTypeNewConversation, req.Mode); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 	return r.SendEnvelope(true)

cmd/business_hours.go

@@ -55,11 +55,12 @@ func handleCreateBusinessHours(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil, envelope.InputError)
 	}
 
-	if err := app.businessHours.Create(businessHours.Name, businessHours.Description, businessHours.IsAlwaysOpen, businessHours.Hours, businessHours.Holidays); err != nil {
+	createdBusinessHours, err := app.businessHours.Create(businessHours.Name, businessHours.Description, businessHours.IsAlwaysOpen, businessHours.Hours, businessHours.Holidays)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(createdBusinessHours)
 }
 
 // handleDeleteBusinessHour deletes the business hour with the given id.
@@ -93,8 +94,9 @@ func handleUpdateBusinessHours(r *fastglue.Request) error {
 	if businessHours.Name == "" {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`name`"), nil, envelope.InputError)
 	}
-	if err := app.businessHours.Update(id, businessHours.Name, businessHours.Description, businessHours.IsAlwaysOpen, businessHours.Hours, businessHours.Holidays); err != nil {
+	updatedBusinessHours, err := app.businessHours.Update(id, businessHours.Name, businessHours.Description, businessHours.IsAlwaysOpen, businessHours.Hours, businessHours.Holidays)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(updatedBusinessHours)
 }

cmd/config.go

@@ -0,0 +1,63 @@
+package main
+
+import (
+	"encoding/json"
+
+	"github.com/abhinavxd/libredesk/internal/envelope"
+	"github.com/zerodha/fastglue"
+)
+
+// handleGetConfig returns the public configuration needed for app initialization, this includes minimal app settings and enabled SSO providers (without secrets).
+func handleGetConfig(r *fastglue.Request) error {
+	var app = r.Context.(*App)
+
+	// Get app settings
+	settingsJSON, err := app.setting.GetByPrefix("app")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Unmarshal settings
+	var settings map[string]any
+	if err := json.Unmarshal(settingsJSON, &settings); err != nil {
+		app.lo.Error("error unmarshalling settings", "err", err)
+		return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorFetching", "name", app.i18n.T("globals.terms.setting")), nil))
+	}
+
+	// Filter to only include public fields needed for initial app load
+	publicSettings := map[string]any{
+		"app.lang":        settings["app.lang"],
+		"app.favicon_url": settings["app.favicon_url"],
+		"app.logo_url":    settings["app.logo_url"],
+		"app.site_name":   settings["app.site_name"],
+	}
+
+	// Get all OIDC providers
+	oidcProviders, err := app.oidc.GetAll()
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Filter for enabled providers and remove client_secret
+	enabledProviders := make([]map[string]any, 0)
+	for _, provider := range oidcProviders {
+		if provider.Enabled {
+			providerMap := map[string]any{
+				"id":           provider.ID,
+				"name":         provider.Name,
+				"provider":     provider.Provider,
+				"provider_url": provider.ProviderURL,
+				"client_id":    provider.ClientID,
+				"logo_url":     provider.ProviderLogoURL,
+				"enabled":      provider.Enabled,
+				"redirect_uri": provider.RedirectURI,
+			}
+			enabledProviders = append(enabledProviders, providerMap)
+		}
+	}
+
+	// Add SSO providers to the response
+	publicSettings["app.sso_providers"] = enabledProviders
+
+	return r.SendEnvelope(publicSettings)
+}

cmd/contacts.go

@@ -14,6 +14,14 @@ import (
 	"github.com/zerodha/fastglue"
 )
 
+type createContactNoteReq struct {
+	Note string `json:"note"`
+}
+
+type blockContactReq struct {
+	Enabled bool `json:"enabled"`
+}
+
 // handleGetContacts returns a list of contacts from the database.
 func handleGetContacts(r *fastglue.Request) error {
 	var (
@@ -95,9 +103,9 @@ func handleUpdateContact(r *fastglue.Request) error {
 	if v, ok := form.Value["phone_number"]; ok && len(v) > 0 {
 		phoneNumber = string(v[0])
 	}
-	phoneNumberCallingCode := ""
-	if v, ok := form.Value["phone_number_calling_code"]; ok && len(v) > 0 {
-		phoneNumberCallingCode = string(v[0])
+	phoneNumberCountryCode := ""
+	if v, ok := form.Value["phone_number_country_code"]; ok && len(v) > 0 {
+		phoneNumberCountryCode = string(v[0])
 	}
 	avatarURL := ""
 	if v, ok := form.Value["avatar_url"]; ok && len(v) > 0 {
@@ -108,8 +116,8 @@ func handleUpdateContact(r *fastglue.Request) error {
 	if avatarURL == "null" {
 		avatarURL = ""
 	}
-	if phoneNumberCallingCode == "null" {
-		phoneNumberCallingCode = ""
+	if phoneNumberCountryCode == "null" {
+		phoneNumberCountryCode = ""
 	}
 	if phoneNumber == "null" {
 		phoneNumber = ""
@@ -138,7 +146,7 @@ func handleUpdateContact(r *fastglue.Request) error {
 		Email:                  null.StringFrom(email),
 		AvatarURL:              null.NewString(avatarURL, avatarURL != ""),
 		PhoneNumber:            null.NewString(phoneNumber, phoneNumber != ""),
-		PhoneNumberCallingCode: null.NewString(phoneNumberCallingCode, phoneNumberCallingCode != ""),
+		PhoneNumberCountryCode: null.NewString(phoneNumberCountryCode, phoneNumberCountryCode != ""),
 	}
 
 	if err := app.user.UpdateContact(id, contactToUpdate); err != nil {
@@ -156,11 +164,17 @@ func handleUpdateContact(r *fastglue.Request) error {
 	// Upload avatar?
 	files, ok := form.File["files"]
 	if ok && len(files) > 0 {
-		if err := uploadUserAvatar(r, &contact, files); err != nil {
+		if err := uploadUserAvatar(r, contact, files); err != nil {
 			return sendErrorEnvelope(r, err)
 		}
 	}
-	return r.SendEnvelope(true)
+
+	// Refetch contact and return it
+	contact, err = app.user.GetContact(id, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	return r.SendEnvelope(contact)
 }
 
 // handleGetContactNotes returns all notes for a contact.
@@ -185,15 +199,23 @@ func handleCreateContactNote(r *fastglue.Request) error {
 		app          = r.Context.(*App)
 		contactID, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 		auser        = r.RequestCtx.UserValue("user").(amodels.User)
-		note         = string(r.RequestCtx.PostArgs().Peek("note"))
+		req          = createContactNoteReq{}
 	)
-	if len(note) == 0 {
+	if err := r.Decode(&req, "json"); err != nil {
+		return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil))
+	}
+	if len(req.Note) == 0 {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "note"), nil, envelope.InputError)
 	}
-	if err := app.user.CreateNote(contactID, auser.ID, note); err != nil {
+	n, err := app.user.CreateNote(contactID, auser.ID, req.Note)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	n, err = app.user.GetNote(n.ID)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	return r.SendEnvelope(n)
 }
 
 // handleDeleteContactNote deletes a note for a contact.
@@ -227,6 +249,8 @@ func handleDeleteContactNote(r *fastglue.Request) error {
 		}
 	}
 
+	app.lo.Info("deleting contact note", "note_id", noteID, "contact_id", contactID, "actor_id", auser.ID)
+
 	if err := app.user.DeleteNote(noteID, contactID); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
@@ -238,13 +262,27 @@ func handleBlockContact(r *fastglue.Request) error {
 	var (
 		app          = r.Context.(*App)
 		contactID, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
-		enabled      = r.RequestCtx.PostArgs().GetBool("enabled")
+		auser        = r.RequestCtx.UserValue("user").(amodels.User)
+		req          = blockContactReq{}
 	)
+
 	if contactID <= 0 {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
-	if err := app.user.ToggleEnabled(contactID, models.UserTypeContact, enabled); err != nil {
+
+	if err := r.Decode(&req, "json"); err != nil {
+		return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil))
+	}
+
+	app.lo.Info("setting contact block status", "contact_id", contactID, "enabled", req.Enabled, "actor_id", auser.ID)
+
+	if err := app.user.ToggleEnabled(contactID, models.UserTypeContact, req.Enabled); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+
+	contact, err := app.user.GetContact(contactID, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	return r.SendEnvelope(contact)
 }

cmd/conversation.go

@@ -1,9 +1,7 @@
 package main
 
 import (
-	"encoding/json"
 	"strconv"
-	"strings"
 	"time"
 
 	amodels "github.com/abhinavxd/libredesk/internal/auth/models"
@@ -11,13 +9,49 @@ import (
 	"github.com/abhinavxd/libredesk/internal/automation/models"
 	cmodels "github.com/abhinavxd/libredesk/internal/conversation/models"
 	"github.com/abhinavxd/libredesk/internal/envelope"
+	medModels "github.com/abhinavxd/libredesk/internal/media/models"
 	"github.com/abhinavxd/libredesk/internal/stringutil"
 	umodels "github.com/abhinavxd/libredesk/internal/user/models"
+	wmodels "github.com/abhinavxd/libredesk/internal/webhook/models"
 	"github.com/valyala/fasthttp"
 	"github.com/volatiletech/null/v9"
 	"github.com/zerodha/fastglue"
 )
 
+type assigneeChangeReq struct {
+	AssigneeID int `json:"assignee_id"`
+}
+
+type teamAssigneeChangeReq struct {
+	AssigneeID int `json:"assignee_id"`
+}
+
+type priorityUpdateReq struct {
+	Priority string `json:"priority"`
+}
+
+type statusUpdateReq struct {
+	Status       string `json:"status"`
+	SnoozedUntil string `json:"snoozed_until,omitempty"`
+}
+
+type tagsUpdateReq struct {
+	Tags []string `json:"tags"`
+}
+
+type createConversationRequest struct {
+	InboxID         int    `json:"inbox_id"`
+	AssignedAgentID int    `json:"agent_id"`
+	AssignedTeamID  int    `json:"team_id"`
+	Email           string `json:"contact_email"`
+	FirstName       string `json:"first_name"`
+	LastName        string `json:"last_name"`
+	Subject         string `json:"subject"`
+	Content         string `json:"content"`
+	Attachments     []int  `json:"attachments"`
+	Initiator       string `json:"initiator"` // "contact" | "agent"
+}
+
 // handleGetAllConversations retrieves all conversations.
 func handleGetAllConversations(r *fastglue.Request) error {
 	var (
@@ -240,8 +274,8 @@ func handleGetConversation(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	prev, _ := app.conversation.GetContactConversations(conv.ContactID)
-	conv.PreviousConversations = filterCurrentConv(prev, conv.UUID)
+	prev, _ := app.conversation.GetContactPreviousConversations(conv.ContactID, 10)
+	conv.PreviousConversations = filterCurrentPreviousConv(prev, conv.UUID)
 	return r.SendEnvelope(conv)
 }
 
@@ -291,13 +325,15 @@ func handleGetConversationParticipants(r *fastglue.Request) error {
 // handleUpdateUserAssignee updates the user assigned to a conversation.
 func handleUpdateUserAssignee(r *fastglue.Request) error {
 	var (
-		app        = r.Context.(*App)
-		uuid       = r.RequestCtx.UserValue("uuid").(string)
-		auser      = r.RequestCtx.UserValue("user").(amodels.User)
-		assigneeID = r.RequestCtx.PostArgs().GetUintOrZero("assignee_id")
+		app   = r.Context.(*App)
+		uuid  = r.RequestCtx.UserValue("uuid").(string)
+		auser = r.RequestCtx.UserValue("user").(amodels.User)
+		req   = assigneeChangeReq{}
 	)
-	if assigneeID == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`assignee_id`"), nil, envelope.InputError)
+
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error decoding assignee change request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
 	user, err := app.user.GetAgent(auser.ID, "")
@@ -305,17 +341,19 @@ func handleUpdateUserAssignee(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	_, err = enforceConversationAccess(app, uuid, user)
+	conversation, err := enforceConversationAccess(app, uuid, user)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err := app.conversation.UpdateConversationUserAssignee(uuid, assigneeID, user); err != nil {
-		return sendErrorEnvelope(r, err)
+	// Already assigned?
+	if conversation.AssignedUserID.Int == req.AssigneeID {
+		return r.SendEnvelope(true)
 	}
 
-	// Evaluate automation rules.
-	app.automation.EvaluateConversationUpdateRules(uuid, models.EventConversationUserAssigned)
+	if err := app.conversation.UpdateConversationUserAssignee(uuid, req.AssigneeID, user); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
 
 	return r.SendEnvelope(true)
 }
@@ -326,12 +364,16 @@ func handleUpdateTeamAssignee(r *fastglue.Request) error {
 		app   = r.Context.(*App)
 		uuid  = r.RequestCtx.UserValue("uuid").(string)
 		auser = r.RequestCtx.UserValue("user").(amodels.User)
+		req   = teamAssigneeChangeReq{}
 	)
-	assigneeID, err := r.RequestCtx.PostArgs().GetUint("assignee_id")
-	if err != nil {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`assignee_id`"), nil, envelope.InputError)
+
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error decoding team assignee change request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
+	assigneeID := req.AssigneeID
+
 	user, err := app.user.GetAgent(auser.ID, "")
 	if err != nil {
 		return sendErrorEnvelope(r, err)
@@ -342,28 +384,37 @@ func handleUpdateTeamAssignee(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	_, err = enforceConversationAccess(app, uuid, user)
+	conversation, err := enforceConversationAccess(app, uuid, user)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
+
+	// Already assigned?
+	if conversation.AssignedTeamID.Int == assigneeID {
+		return r.SendEnvelope(true)
+	}
 	if err := app.conversation.UpdateConversationTeamAssignee(uuid, assigneeID, user); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// Evaluate automation rules on team assignment.
-	app.automation.EvaluateConversationUpdateRules(uuid, models.EventConversationTeamAssigned)
-
 	return r.SendEnvelope(true)
 }
 
 // handleUpdateConversationPriority updates the priority of a conversation.
 func handleUpdateConversationPriority(r *fastglue.Request) error {
 	var (
-		app      = r.Context.(*App)
-		uuid     = r.RequestCtx.UserValue("uuid").(string)
-		auser    = r.RequestCtx.UserValue("user").(amodels.User)
-		priority = string(r.RequestCtx.PostArgs().Peek("priority"))
+		app   = r.Context.(*App)
+		uuid  = r.RequestCtx.UserValue("uuid").(string)
+		auser = r.RequestCtx.UserValue("user").(amodels.User)
+		req   = priorityUpdateReq{}
 	)
+
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error decoding priority update request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	priority := req.Priority
 	if priority == "" {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`priority`"), nil, envelope.InputError)
 	}
@@ -380,22 +431,26 @@ func handleUpdateConversationPriority(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// Evaluate automation rules.
-	app.automation.EvaluateConversationUpdateRules(uuid, models.EventConversationPriorityChange)
-
 	return r.SendEnvelope(true)
 }
 
 // handleUpdateConversationStatus updates the status of a conversation.
 func handleUpdateConversationStatus(r *fastglue.Request) error {
 	var (
-		app          = r.Context.(*App)
-		status       = string(r.RequestCtx.PostArgs().Peek("status"))
-		snoozedUntil = string(r.RequestCtx.PostArgs().Peek("snoozed_until"))
-		uuid         = r.RequestCtx.UserValue("uuid").(string)
-		auser        = r.RequestCtx.UserValue("user").(amodels.User)
+		app   = r.Context.(*App)
+		uuid  = r.RequestCtx.UserValue("uuid").(string)
+		auser = r.RequestCtx.UserValue("user").(amodels.User)
+		req   = statusUpdateReq{}
 	)
 
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error decoding status update request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	status := req.Status
+	snoozedUntil := req.SnoozedUntil
+
 	// Validate inputs
 	if status == "" {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`status`"), nil, envelope.InputError)
@@ -430,9 +485,6 @@ func handleUpdateConversationStatus(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// Evaluate automation rules.
-	app.automation.EvaluateConversationUpdateRules(uuid, models.EventConversationStatusChange)
-
 	// If status is `Resolved`, send CSAT survey if enabled on inbox.
 	if status == cmodels.StatusResolved {
 		// Check if CSAT is enabled on the inbox and send CSAT survey message.
@@ -452,18 +504,19 @@ func handleUpdateConversationStatus(r *fastglue.Request) error {
 // handleUpdateConversationtags updates conversation tags.
 func handleUpdateConversationtags(r *fastglue.Request) error {
 	var (
-		app      = r.Context.(*App)
-		tagNames = []string{}
-		tagJSON  = r.RequestCtx.PostArgs().Peek("tags")
-		auser    = r.RequestCtx.UserValue("user").(amodels.User)
-		uuid     = r.RequestCtx.UserValue("uuid").(string)
+		app   = r.Context.(*App)
+		auser = r.RequestCtx.UserValue("user").(amodels.User)
+		uuid  = r.RequestCtx.UserValue("uuid").(string)
+		req   = tagsUpdateReq{}
 	)
 
-	if err := json.Unmarshal(tagJSON, &tagNames); err != nil {
-		app.lo.Error("error unmarshalling tags JSON", "error", err)
-		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error decoding tags update request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
+	tagNames := req.Tags
+
 	user, err := app.user.GetAgent(auser.ID, "")
 	if err != nil {
 		return sendErrorEnvelope(r, err)
@@ -534,33 +587,11 @@ func handleUpdateContactCustomAttributes(r *fastglue.Request) error {
 	if err := app.user.UpdateCustomAttributes(conversation.ContactID, attributes); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
+	// Broadcast update.
+	app.conversation.BroadcastConversationUpdate(conversation.UUID, "contact.custom_attributes", attributes)
 	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)
@@ -592,7 +623,7 @@ func handleRemoveUserAssignee(r *fastglue.Request) error {
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	if err = app.conversation.RemoveConversationAssignee(uuid, "user"); err != nil {
+	if err = app.conversation.RemoveConversationAssignee(uuid, "user", user); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 	return r.SendEnvelope(true)
@@ -613,117 +644,155 @@ func handleRemoveTeamAssignee(r *fastglue.Request) error {
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	if err = app.conversation.RemoveConversationAssignee(uuid, "team"); err != nil {
+	if err = app.conversation.RemoveConversationAssignee(uuid, "team", user); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 	return r.SendEnvelope(true)
 }
 
-// filterCurrentConv removes the current conversation from the list of conversations.
-func filterCurrentConv(convs []cmodels.Conversation, uuid string) []cmodels.Conversation {
+// filterCurrentPreviousConv removes the current conversation from the list of previous conversations.
+func filterCurrentPreviousConv(convs []cmodels.PreviousConversation, uuid string) []cmodels.PreviousConversation {
 	for i, c := range convs {
 		if c.UUID == uuid {
 			return append(convs[:i], convs[i+1:]...)
 		}
 	}
-	return []cmodels.Conversation{}
+	return []cmodels.PreviousConversation{}
 }
 
 // handleCreateConversation creates a new conversation and sends a message to it.
 func handleCreateConversation(r *fastglue.Request) error {
 	var (
-		app             = r.Context.(*App)
-		auser           = r.RequestCtx.UserValue("user").(amodels.User)
-		inboxID         = r.RequestCtx.PostArgs().GetUintOrZero("inbox_id")
-		assignedAgentID = r.RequestCtx.PostArgs().GetUintOrZero("agent_id")
-		assignedTeamID  = r.RequestCtx.PostArgs().GetUintOrZero("team_id")
-		email           = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("contact_email")))
-		firstName       = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("first_name")))
-		lastName        = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("last_name")))
-		subject         = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("subject")))
-		content         = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("content")))
-		to              = []string{email}
+		app   = r.Context.(*App)
+		auser = r.RequestCtx.UserValue("user").(amodels.User)
+		req   = createConversationRequest{}
 	)
 
-	// Validate required fields
-	if inboxID <= 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`inbox_id`"), nil, envelope.InputError)
-	}
-	if subject == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`subject`"), nil, envelope.InputError)
-	}
-	if content == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`content`"), nil, envelope.InputError)
-	}
-	if email == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`contact_email`"), nil, envelope.InputError)
-	}
-	if firstName == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`first_name`"), nil, envelope.InputError)
-	}
-	if !stringutil.ValidEmail(email) {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`contact_email`"), nil, envelope.InputError)
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error decoding create conversation request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
+	// Validate the request
+	if err := validateCreateConversationRequest(req, app); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	to := []string{req.Email}
 	user, err := app.user.GetAgent(auser.ID, "")
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// Check if inbox exists and is enabled.
-	inbox, err := app.inbox.GetDBRecord(inboxID)
-	if err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-	if !inbox.Enabled {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.disabled", "name", "inbox"), nil, envelope.InputError)
-	}
-
 	// Find or create contact.
 	contact := umodels.User{
-		Email:           null.StringFrom(email),
-		SourceChannelID: null.StringFrom(email),
-		FirstName:       firstName,
-		LastName:        lastName,
-		InboxID:         inboxID,
+		Email:           null.StringFrom(req.Email),
+		SourceChannelID: null.StringFrom(req.Email),
+		FirstName:       req.FirstName,
+		LastName:        req.LastName,
+		InboxID:         req.InboxID,
 	}
 	if err := app.user.CreateContact(&contact); err != nil {
 		return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorCreating", "name", "{globals.terms.contact}"), nil))
 	}
 
-	// Create conversation
+	// Create conversation first.
 	conversationID, conversationUUID, err := app.conversation.CreateConversation(
 		contact.ID,
 		contact.ContactChannelID,
-		inboxID,
+		req.InboxID,
 		"",         /** last_message **/
 		time.Now(), /** last_message_at **/
-		subject,
-		true, /** append reference number to subject **/
+		req.Subject,
+		true, /** append reference number to subject? **/
 	)
 	if err != nil {
 		app.lo.Error("error creating conversation", "error", err)
 		return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorCreating", "name", "{globals.terms.conversation}"), nil))
 	}
 
-	// Send reply to the created conversation.
-	if err := app.conversation.SendReply(nil /**media**/, inboxID, auser.ID /**sender_id**/, conversationUUID, content, to, nil /**cc**/, nil /**bcc**/, map[string]any{} /**meta**/); err != nil {
-		// Delete the conversation if reply fails.
-		if err := app.conversation.DeleteConversation(conversationUUID); err != nil {
-			app.lo.Error("error deleting conversation", "error", err)
+	// Get media for the attachment ids.
+	var media = make([]medModels.Media, 0, len(req.Attachments))
+	for _, id := range req.Attachments {
+		m, err := app.media.Get(id, "")
+		if err != nil {
+			app.lo.Error("error fetching media", "error", err)
+			return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.errorFetching", "name", "{globals.terms.media}"), nil, envelope.GeneralError)
 		}
-		return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorSending", "name", "{globals.terms.message}"), nil))
+		media = append(media, m)
+	}
+
+	// Send initial message based on the initiator of conversation.
+	switch req.Initiator {
+	case umodels.UserTypeAgent:
+		// Queue reply.
+		if _, err := app.conversation.QueueReply(media, req.InboxID, auser.ID /**sender_id**/, conversationUUID, req.Content, to, nil /**cc**/, nil /**bcc**/, map[string]any{} /**meta**/); err != nil {
+			// Delete the conversation if msg queue fails.
+			if err := app.conversation.DeleteConversation(conversationUUID); err != nil {
+				app.lo.Error("error deleting conversation", "error", err)
+			}
+			return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorSending", "name", "{globals.terms.message}"), nil))
+		}
+	case umodels.UserTypeContact:
+		// Create contact message.
+		if _, err := app.conversation.CreateContactMessage(media, contact.ID, conversationUUID, req.Content, cmodels.ContentTypeHTML); err != nil {
+			// Delete the conversation if message creation fails.
+			if err := app.conversation.DeleteConversation(conversationUUID); err != nil {
+				app.lo.Error("error deleting conversation", "error", err)
+			}
+			return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorSending", "name", "{globals.terms.message}"), nil))
+		}
+	default:
+		// Guard anyway.
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`initiator`"), nil, envelope.InputError)
 	}
 
 	// Assign the conversation to the agent or team.
-	if assignedAgentID > 0 {
-		app.conversation.UpdateConversationUserAssignee(conversationUUID, assignedAgentID, user)
+	if req.AssignedAgentID > 0 {
+		app.conversation.UpdateConversationUserAssignee(conversationUUID, req.AssignedAgentID, user)
 	}
-	if assignedTeamID > 0 {
-		app.conversation.UpdateConversationTeamAssignee(conversationUUID, assignedTeamID, user)
+	if req.AssignedTeamID > 0 {
+		app.conversation.UpdateConversationTeamAssignee(conversationUUID, req.AssignedTeamID, user)
+	}
+
+	// Trigger webhook event for conversation created.
+	conversation, err := app.conversation.GetConversation(conversationID, "")
+	if err == nil {
+		app.webhook.TriggerEvent(wmodels.EventConversationCreated, conversation)
 	}
 
-	// Send the created conversation back to the client.
-	conversation, _ := app.conversation.GetConversation(conversationID, "")
 	return r.SendEnvelope(conversation)
 }
+
+// validateCreateConversationRequest validates the create conversation request fields.
+func validateCreateConversationRequest(req createConversationRequest, app *App) error {
+	if req.InboxID <= 0 {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.required", "name", "`inbox_id`"), nil)
+	}
+	if req.Content == "" {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.required", "name", "`content`"), nil)
+	}
+	if req.Email == "" {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.required", "name", "`contact_email`"), nil)
+	}
+	if req.FirstName == "" {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.required", "name", "`first_name`"), nil)
+	}
+	if !stringutil.ValidEmail(req.Email) {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`contact_email`"), nil)
+	}
+	if req.Initiator != umodels.UserTypeContact && req.Initiator != umodels.UserTypeAgent {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`initiator`"), nil)
+	}
+
+	// Check if inbox exists and is enabled.
+	inbox, err := app.inbox.GetDBRecord(req.InboxID)
+	if err != nil {
+		return err
+	}
+	if !inbox.Enabled {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.disabled", "name", "inbox"), nil)
+	}
+
+	return nil
+}

cmd/csat.go

@@ -6,6 +6,10 @@ import (
 	"github.com/zerodha/fastglue"
 )
 
+const (
+	maxCsatFeedbackLength = 1000
+)
+
 // handleShowCSAT renders the CSAT page for a given csat.
 func handleShowCSAT(r *fastglue.Request) error {
 	var (
@@ -17,7 +21,7 @@ func handleShowCSAT(r *fastglue.Request) error {
 	if err != nil {
 		return app.tmpl.RenderWebPage(r.RequestCtx, "error", map[string]interface{}{
 			"Data": map[string]interface{}{
-				"ErrorMessage": "Page not found",
+				"ErrorMessage": app.i18n.T("globals.messages.pageNotFound"),
 			},
 		})
 	}
@@ -25,8 +29,8 @@ func handleShowCSAT(r *fastglue.Request) error {
 	if csat.ResponseTimestamp.Valid {
 		return app.tmpl.RenderWebPage(r.RequestCtx, "info", map[string]interface{}{
 			"Data": map[string]interface{}{
-				"Title":   "Thank you!",
-				"Message": "We appreciate you taking the time to submit your feedback.",
+				"Title":   app.i18n.T("globals.messages.thankYou"),
+				"Message": app.i18n.T("csat.thankYouMessage"),
 			},
 		})
 	}
@@ -35,14 +39,14 @@ func handleShowCSAT(r *fastglue.Request) error {
 	if err != nil {
 		return app.tmpl.RenderWebPage(r.RequestCtx, "error", map[string]interface{}{
 			"Data": map[string]interface{}{
-				"ErrorMessage": "Page not found",
+				"ErrorMessage": app.i18n.T("globals.messages.pageNotFound"),
 			},
 		})
 	}
 
 	return app.tmpl.RenderWebPage(r.RequestCtx, "csat", map[string]interface{}{
 		"Data": map[string]interface{}{
-			"Title":    "Rate your interaction with us",
+			"Title": app.i18n.T("csat.pageTitle"),
 			"CSAT": map[string]interface{}{
 				"UUID": csat.UUID,
 			},
@@ -67,7 +71,7 @@ func handleUpdateCSATResponse(r *fastglue.Request) error {
 	if err != nil {
 		return app.tmpl.RenderWebPage(r.RequestCtx, "error", map[string]interface{}{
 			"Data": map[string]interface{}{
-				"ErrorMessage": "Invalid `rating`",
+				"ErrorMessage": app.i18n.T("globals.messages.somethingWentWrong"),
 			},
 		})
 	}
@@ -75,7 +79,7 @@ func handleUpdateCSATResponse(r *fastglue.Request) error {
 	if ratingI < 1 || ratingI > 5 {
 		return app.tmpl.RenderWebPage(r.RequestCtx, "error", map[string]interface{}{
 			"Data": map[string]interface{}{
-				"ErrorMessage": "Invalid `rating`",
+				"ErrorMessage": app.i18n.T("globals.messages.somethingWentWrong"),
 			},
 		})
 	}
@@ -83,11 +87,16 @@ func handleUpdateCSATResponse(r *fastglue.Request) error {
 	if uuid == "" {
 		return app.tmpl.RenderWebPage(r.RequestCtx, "error", map[string]interface{}{
 			"Data": map[string]interface{}{
-				"ErrorMessage": "Invalid `uuid`",
+				"ErrorMessage": app.i18n.T("globals.messages.somethingWentWrong"),
 			},
 		})
 	}
 
+	// Trim feedback if it exceeds max length
+	if len(feedback) > maxCsatFeedbackLength {
+		feedback = feedback[:maxCsatFeedbackLength]
+	}
+
 	if err := app.csat.UpdateResponse(uuid, ratingI, feedback); err != nil {
 		return app.tmpl.RenderWebPage(r.RequestCtx, "error", map[string]interface{}{
 			"Data": map[string]interface{}{
@@ -98,8 +107,8 @@ func handleUpdateCSATResponse(r *fastglue.Request) error {
 
 	return app.tmpl.RenderWebPage(r.RequestCtx, "info", map[string]interface{}{
 		"Data": map[string]interface{}{
-			"Title":   "Thank you!",
-			"Message": "We appreciate you taking the time to submit your feedback.",
+			"Title":   app.i18n.T("globals.messages.thankYou"),
+			"Message": app.i18n.T("csat.thankYouMessage"),
 		},
 	})
 }

cmd/custom_attributes.go

@@ -70,10 +70,11 @@ func handleCreateCustomAttribute(r *fastglue.Request) error {
 	if err := validateCustomAttribute(app, attribute); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	if err := app.customAttribute.Create(attribute); err != nil {
+	createdAttr, err := app.customAttribute.Create(attribute)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(createdAttr)
 }
 
 // handleUpdateCustomAttribute updates an existing custom attribute in the database.
@@ -92,10 +93,11 @@ func handleUpdateCustomAttribute(r *fastglue.Request) error {
 	if err := validateCustomAttribute(app, attribute); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	if err = app.customAttribute.Update(id, attribute); err != nil {
+	updatedAttr, err := app.customAttribute.Update(id, attribute)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(updatedAttr)
 }
 
 // handleDeleteCustomAttribute deletes a custom attribute from the database.

cmd/handlers.go

@@ -15,7 +15,7 @@ import (
 // initHandlers initializes the HTTP routes and handlers for the application.
 func initHandlers(g *fastglue.Fastglue, hub *ws.Hub) {
 	// Authentication.
-	g.POST("/api/v1/login", handleLogin)
+	g.POST("/api/v1/auth/login", handleLogin)
 	g.GET("/logout", auth(handleLogout))
 	g.GET("/api/v1/oidc/{id}/login", handleOIDCLogin)
 	g.GET("/api/v1/oidc/{id}/finish", handleOIDCCallback)
@@ -23,21 +23,22 @@ func initHandlers(g *fastglue.Fastglue, hub *ws.Hub) {
 	// i18n.
 	g.GET("/api/v1/lang/{lang}", handleGetI18nLang)
 
+	// Public config for app initialization.
+	g.GET("/api/v1/config", handleGetConfig)
+
 	// Media.
 	g.GET("/uploads/{uuid}", auth(handleServeMedia))
 	g.POST("/api/v1/media", auth(handleMediaUpload))
 
 	// Settings.
-	g.GET("/api/v1/settings/general", handleGetGeneralSettings)
+	g.GET("/api/v1/settings/general", auth(handleGetGeneralSettings))
 	g.PUT("/api/v1/settings/general", perm(handleUpdateGeneralSettings, "general_settings:manage"))
 	g.GET("/api/v1/settings/notifications/email", perm(handleGetEmailNotificationSettings, "notification_settings:manage"))
 	g.PUT("/api/v1/settings/notifications/email", perm(handleUpdateEmailNotificationSettings, "notification_settings:manage"))
 
 	// OpenID connect single sign-on.
-	g.GET("/api/v1/oidc/enabled", handleGetAllEnabledOIDC)
 	g.GET("/api/v1/oidc", perm(handleGetAllOIDC, "oidc:manage"))
 	g.POST("/api/v1/oidc", perm(handleCreateOIDC, "oidc:manage"))
-	g.POST("/api/v1/oidc/test", perm(handleTestOIDC, "oidc:manage"))
 	g.GET("/api/v1/oidc/{id}", perm(handleGetOIDC, "oidc:manage"))
 	g.PUT("/api/v1/oidc/{id}", perm(handleUpdateOIDC, "oidc:manage"))
 	g.DELETE("/api/v1/oidc/{id}", perm(handleDeleteOIDC, "oidc:manage"))
@@ -111,6 +112,8 @@ func initHandlers(g *fastglue.Fastglue, hub *ws.Hub) {
 	g.POST("/api/v1/agents", perm(handleCreateAgent, "users:manage"))
 	g.PUT("/api/v1/agents/{id}", perm(handleUpdateAgent, "users:manage"))
 	g.DELETE("/api/v1/agents/{id}", perm(handleDeleteAgent, "users:manage"))
+	g.POST("/api/v1/agents/{id}/api-key", perm(handleGenerateAPIKey, "users:manage"))
+	g.DELETE("/api/v1/agents/{id}/api-key", perm(handleRevokeAPIKey, "users:manage"))
 	g.POST("/api/v1/agents/reset-password", tryAuth(handleResetPassword))
 	g.POST("/api/v1/agents/set-password", tryAuth(handleSetPassword))
 
@@ -152,15 +155,25 @@ func initHandlers(g *fastglue.Fastglue, hub *ws.Hub) {
 	g.DELETE("/api/v1/inboxes/{id}", perm(handleDeleteInbox, "inboxes:manage"))
 
 	// Roles.
-	g.GET("/api/v1/roles", perm(handleGetRoles, "roles:manage"))
+	g.GET("/api/v1/roles", auth(handleGetRoles))
 	g.GET("/api/v1/roles/{id}", perm(handleGetRole, "roles:manage"))
 	g.POST("/api/v1/roles", perm(handleCreateRole, "roles:manage"))
 	g.PUT("/api/v1/roles/{id}", perm(handleUpdateRole, "roles:manage"))
 	g.DELETE("/api/v1/roles/{id}", perm(handleDeleteRole, "roles:manage"))
 
+	// Webhooks.
+	g.GET("/api/v1/webhooks", perm(handleGetWebhooks, "webhooks:manage"))
+	g.GET("/api/v1/webhooks/{id}", perm(handleGetWebhook, "webhooks:manage"))
+	g.POST("/api/v1/webhooks", perm(handleCreateWebhook, "webhooks:manage"))
+	g.PUT("/api/v1/webhooks/{id}", perm(handleUpdateWebhook, "webhooks:manage"))
+	g.DELETE("/api/v1/webhooks/{id}", perm(handleDeleteWebhook, "webhooks:manage"))
+	g.PUT("/api/v1/webhooks/{id}/toggle", perm(handleToggleWebhook, "webhooks:manage"))
+	g.POST("/api/v1/webhooks/{id}/test", perm(handleTestWebhook, "webhooks: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/inboxes.go

@@ -17,6 +17,12 @@ func handleGetInboxes(r *fastglue.Request) error {
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
+	for i := range inboxes {
+		if err := inboxes[i].ClearPasswords(); err != nil {
+			app.lo.Error("error clearing inbox passwords from response", "error", err)
+			return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorFetching", "name", "{globals.terms.inbox}"), nil)
+		}
+	}
 	return r.SendEnvelope(inboxes)
 }
 
@@ -47,11 +53,12 @@ func handleCreateInbox(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), err.Error(), envelope.InputError)
 	}
 
-	if err := app.inbox.Create(inbox); err != nil {
+	createdInbox, err := app.inbox.Create(inbox)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err := validateInbox(app, inbox); err != nil {
+	if err := validateInbox(app, createdInbox); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
@@ -59,7 +66,13 @@ func handleCreateInbox(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.couldNotReload", "name", "{globals.terms.inbox}"), nil, envelope.GeneralError)
 	}
 
-	return r.SendEnvelope(true)
+	// Clear passwords before returning.
+	if err := createdInbox.ClearPasswords(); err != nil {
+		app.lo.Error("error clearing inbox passwords from response", "error", err)
+		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorFetching", "name", "{globals.terms.inbox}"), nil)
+	}
+
+	return r.SendEnvelope(createdInbox)
 }
 
 // handleUpdateInbox updates an inbox
@@ -82,7 +95,7 @@ func handleUpdateInbox(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	err = app.inbox.Update(id, inbox)
+	updatedInbox, err := app.inbox.Update(id, inbox)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
@@ -91,7 +104,13 @@ func handleUpdateInbox(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.couldNotReload", "name", "{globals.terms.inbox}"), nil, envelope.GeneralError)
 	}
 
-	return r.SendEnvelope(inbox)
+	// Clear passwords before returning.
+	if err := updatedInbox.ClearPasswords(); err != nil {
+		app.lo.Error("error clearing inbox passwords from response", "error", err)
+		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorFetching", "name", "{globals.terms.inbox}"), nil)
+	}
+
+	return r.SendEnvelope(updatedInbox)
 }
 
 // handleToggleInbox toggles an inbox
@@ -105,7 +124,8 @@ func handleToggleInbox(r *fastglue.Request) error {
 			app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
-	if err = app.inbox.Toggle(id); err != nil {
+	toggledInbox, err := app.inbox.Toggle(id)
+	if err != nil {
 		return err
 	}
 
@@ -113,7 +133,13 @@ func handleToggleInbox(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.couldNotReload", "name", "{globals.terms.inbox}"), nil, envelope.GeneralError)
 	}
 
-	return r.SendEnvelope(true)
+	// Clear passwords before returning
+	if err := toggledInbox.ClearPasswords(); err != nil {
+		app.lo.Error("error clearing inbox passwords from response", "error", err)
+		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorFetching", "name", "{globals.terms.inbox}"), nil)
+	}
+
+	return r.SendEnvelope(toggledInbox)
 }
 
 // handleDeleteInbox deletes an inbox

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"
@@ -44,6 +45,7 @@ import (
 	tmpl "github.com/abhinavxd/libredesk/internal/template"
 	"github.com/abhinavxd/libredesk/internal/user"
 	"github.com/abhinavxd/libredesk/internal/view"
+	"github.com/abhinavxd/libredesk/internal/webhook"
 	"github.com/abhinavxd/libredesk/internal/ws"
 	"github.com/jmoiron/sqlx"
 	"github.com/knadh/go-i18n"
@@ -219,8 +221,9 @@ func initConversations(
 	csat *csat.Manager,
 	automationEngine *automation.Engine,
 	template *tmpl.Manager,
+	webhook *webhook.Manager,
 ) *conversation.Manager {
-	c, err := conversation.New(hub, i18n, notif, sla, status, priority, inboxStore, userStore, teamStore, mediaStore, settings, csat, automationEngine, template, conversation.Opts{
+	c, err := conversation.New(hub, i18n, notif, sla, status, priority, inboxStore, userStore, teamStore, mediaStore, settings, csat, automationEngine, template, webhook, conversation.Opts{
 		DB:                       db,
 		Lo:                       initLogger("conversation_manager"),
 		OutgoingMessageQueueSize: ko.MustInt("message.outgoing_queue_size"),
@@ -247,11 +250,12 @@ func initTag(db *sqlx.DB, i18n *i18n.I18n) *tag.Manager {
 }
 
 // initViews inits view manager.
-func initView(db *sqlx.DB) *view.Manager {
+func initView(db *sqlx.DB, i18n *i18n.I18n) *view.Manager {
 	var lo = initLogger("view_manager")
 	m, err := view.New(view.Opts{
-		DB: db,
-		Lo: lo,
+		DB:   db,
+		Lo:   lo,
+		I18n: i18n,
 	})
 	if err != nil {
 		log.Fatalf("error initializing view manager: %v", err)
@@ -324,7 +328,7 @@ func initWS(user *user.Manager) *ws.Hub {
 func initTemplate(db *sqlx.DB, fs stuffbin.FileSystem, consts *constants, i18n *i18n.I18n) *tmpl.Manager {
 	var (
 		lo      = initLogger("template")
-		funcMap = getTmplFuncs(consts)
+		funcMap = getTmplFuncs(consts, i18n)
 	)
 	tpls, err := stuffbin.ParseTemplatesGlob(funcMap, fs, "/static/email-templates/*.html")
 	if err != nil {
@@ -342,7 +346,7 @@ func initTemplate(db *sqlx.DB, fs stuffbin.FileSystem, consts *constants, i18n *
 }
 
 // getTmplFuncs returns the template functions.
-func getTmplFuncs(consts *constants) template.FuncMap {
+func getTmplFuncs(consts *constants, i18n *i18n.I18n) template.FuncMap {
 	return template.FuncMap{
 		"RootURL": func() string {
 			return consts.AppBaseURL
@@ -362,6 +366,9 @@ func getTmplFuncs(consts *constants) template.FuncMap {
 		"SiteName": func() string {
 			return consts.SiteName
 		},
+		"L": func() interface{} {
+			return i18n
+		},
 	}
 }
 
@@ -378,7 +385,10 @@ func reloadSettings(app *App) error {
 		app.lo.Error("error unmarshalling settings from DB", "error", err)
 		return err
 	}
-	if err := ko.Load(confmap.Provider(out, "."), nil); err != nil {
+	app.Lock()
+	err = ko.Load(confmap.Provider(out, "."), nil)
+	app.Unlock()
+	if err != nil {
 		app.lo.Error("error loading settings into koanf", "error", err)
 		return err
 	}
@@ -390,7 +400,7 @@ func reloadSettings(app *App) error {
 // reloadTemplates reloads the templates from the filesystem.
 func reloadTemplates(app *App) error {
 	app.lo.Info("reloading templates")
-	funcMap := getTmplFuncs(app.consts.Load().(*constants))
+	funcMap := getTmplFuncs(app.consts.Load().(*constants), app.i18n)
 	tpls, err := stuffbin.ParseTemplatesGlob(funcMap, app.fs, "/static/email-templates/*.html")
 	if err != nil {
 		app.lo.Error("error parsing email templates", "error", err)
@@ -823,6 +833,37 @@ 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
+}
+
+// initWebhook inits webhook manager.
+func initWebhook(db *sqlx.DB, i18n *i18n.I18n) *webhook.Manager {
+	var lo = initLogger("webhook")
+	m, err := webhook.New(webhook.Opts{
+		DB:        db,
+		Lo:        lo,
+		I18n:      i18n,
+		Workers:   ko.MustInt("webhook.workers"),
+		QueueSize: ko.MustInt("webhook.queue_size"),
+		Timeout:   ko.MustDuration("webhook.timeout"),
+	})
+	if err != nil {
+		log.Fatalf("error initializing webhook 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/login.go

@@ -3,23 +3,35 @@ package main
 import (
 	amodels "github.com/abhinavxd/libredesk/internal/auth/models"
 	"github.com/abhinavxd/libredesk/internal/envelope"
-	umodels "github.com/abhinavxd/libredesk/internal/user/models"
 	realip "github.com/ferluci/fast-realip"
 	"github.com/valyala/fasthttp"
 	"github.com/zerodha/fastglue"
 )
 
+type loginRequest struct {
+	Email    string `json:"email"`
+	Password string `json:"password"`
+}
+
 // handleLogin logs in the user and returns the user.
 func handleLogin(r *fastglue.Request) error {
 	var (
 		app      = r.Context.(*App)
-		email    = string(r.RequestCtx.PostArgs().Peek("email"))
-		password = r.RequestCtx.PostArgs().Peek("password")
 		ip       = realip.FromRequest(r.RequestCtx)
+		loginReq loginRequest
 	)
 
+	// Decode JSON request.
+	if err := r.Decode(&loginReq, "json"); err != nil {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	if loginReq.Email == "" || loginReq.Password == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.T("globals.messages.badRequest"), nil, envelope.InputError)
+	}
+
 	// Verify email and password.
-	user, err := app.user.VerifyPassword(email, password)
+	user, err := app.user.VerifyPassword(loginReq.Email, []byte(loginReq.Password))
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
@@ -29,12 +41,6 @@ func handleLogin(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.T("user.accountDisabled"), nil))
 	}
 
-	// Set user availability status to online.
-	if err := app.user.UpdateAvailability(user.ID, umodels.Online); err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-	user.AvailabilityStatus = umodels.Online
-
 	if err := app.auth.SaveSession(amodels.User{
 		ID:        user.ID,
 		Email:     user.Email.String,

cmd/macro.go

@@ -81,12 +81,12 @@ func handleCreateMacro(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	err := app.macro.Create(macro.Name, macro.MessageContent, macro.UserID, macro.TeamID, macro.Visibility, macro.Actions)
+	createdMacro, err := app.macro.Create(macro.Name, macro.MessageContent, macro.UserID, macro.TeamID, macro.Visibility, macro.VisibleWhen, macro.Actions)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope(macro)
+	return r.SendEnvelope(createdMacro)
 }
 
 // handleUpdateMacro updates a macro.
@@ -110,11 +110,12 @@ func handleUpdateMacro(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err = app.macro.Update(id, macro.Name, macro.MessageContent, macro.UserID, macro.TeamID, macro.Visibility, macro.Actions); err != nil {
+	updatedMacro, err := app.macro.Update(id, macro.Name, macro.MessageContent, macro.UserID, macro.TeamID, macro.Visibility, macro.VisibleWhen, macro.Actions)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope(macro)
+	return r.SendEnvelope(updatedMacro)
 }
 
 // handleDeleteMacro deletes macro.
@@ -275,13 +276,17 @@ func validateMacro(app *App, macro models.Macro) error {
 		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil)
 	}
 
+	if len(macro.VisibleWhen) == 0 {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`visible_when`"), nil)
+	}
+
 	var act []autoModels.RuleAction
 	if err := json.Unmarshal(macro.Actions, &act); err != nil {
 		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.macroAction}"), nil)
 	}
 	for _, a := range act {
 		if len(a.Value) == 0 {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.emptyActionValue", "name", a.Type), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", a.Type), nil)
 		}
 	}
 	return nil

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"
@@ -40,6 +41,7 @@ import (
 	"github.com/abhinavxd/libredesk/internal/team"
 	"github.com/abhinavxd/libredesk/internal/template"
 	"github.com/abhinavxd/libredesk/internal/user"
+	"github.com/abhinavxd/libredesk/internal/webhook"
 	"github.com/knadh/go-i18n"
 	"github.com/knadh/koanf/v2"
 	"github.com/knadh/stuffbin"
@@ -90,9 +92,13 @@ type App struct {
 	activityLog     *activitylog.Manager
 	notifier        *notifier.Service
 	customAttribute *customAttribute.Manager
+	report          *report.Manager
+	webhook         *webhook.Manager
 
 	// Global state that stores data on an available app update.
 	update *AppUpdate
+	// Flag to indicate if app restart is required for settings to take effect.
+	restartRequired bool
 	sync.Mutex
 }
 
@@ -157,13 +163,23 @@ func main() {
 	settings := initSettings(db)
 	loadSettings(settings)
 
+	// Fallback for config typo. Logs a warning but continues to work with the incorrect key.
+	// Uses 'message.message_outgoing_scan_interval' (correct key) as default key, falls back to the common typo.
+	msgOutgoingScanIntervalKey := "message.message_outgoing_scan_interval"
+	if ko.String(msgOutgoingScanIntervalKey) == "" {
+		if ko.String("message.message_outoing_scan_interval") != "" {
+			colorlog.Red("WARNING: typo in config key 'message.message_outoing_scan_interval' detected. Use 'message.message_outgoing_scan_interval' instead in your config.toml file. Support for this incorrect key will be removed in a future release.")
+			msgOutgoingScanIntervalKey = "message.message_outoing_scan_interval"
+		}
+	}
+
 	var (
 		autoAssignInterval          = ko.MustDuration("autoassigner.autoassign_interval")
 		unsnoozeInterval            = ko.MustDuration("conversation.unsnooze_interval")
 		automationWorkers           = ko.MustInt("automation.worker_count")
 		messageOutgoingQWorkers     = ko.MustDuration("message.outgoing_queue_workers")
 		messageIncomingQWorkers     = ko.MustDuration("message.incoming_queue_workers")
-		messageOutgoingScanInterval = ko.MustDuration("message.message_outoing_scan_interval")
+		messageOutgoingScanInterval = ko.MustDuration(msgOutgoingScanIntervalKey)
 		slaEvaluationInterval       = ko.MustDuration("sla.evaluation_interval")
 		lo                          = initLogger(appName)
 		rdb                         = initRedis()
@@ -179,12 +195,13 @@ func main() {
 		inbox                       = initInbox(db, i18n)
 		team                        = initTeam(db, i18n)
 		businessHours               = initBusinessHours(db, i18n)
+		webhook                     = initWebhook(db, i18n)
 		user                        = initUser(i18n, db)
 		wsHub                       = initWS(user)
 		notifier                    = initNotifier()
 		automation                  = initAutomationEngine(db, i18n)
 		sla                         = initSLA(db, team, settings, businessHours, notifier, template, user, i18n)
-		conversation                = initConversations(i18n, sla, status, priority, wsHub, notifier, db, inbox, user, team, media, settings, csat, automation, template)
+		conversation                = initConversations(i18n, sla, status, priority, wsHub, notifier, db, inbox, user, team, media, settings, csat, automation, template, webhook)
 		autoassigner                = initAutoAssigner(team, user, conversation)
 	)
 	automation.SetConversationStore(conversation)
@@ -194,6 +211,7 @@ func main() {
 	go autoassigner.Run(ctx, autoAssignInterval)
 	go conversation.Run(ctx, messageIncomingQWorkers, messageOutgoingQWorkers, messageOutgoingScanInterval)
 	go conversation.RunUnsnoozer(ctx, unsnoozeInterval)
+	go webhook.Run(ctx)
 	go notifier.Run(ctx)
 	go sla.Run(ctx, slaEvaluationInterval)
 	go sla.SendNotifications(ctx)
@@ -223,13 +241,15 @@ func main() {
 		activityLog:     initActivityLog(db, i18n),
 		customAttribute: initCustomAttribute(db, i18n),
 		authz:           initAuthz(i18n),
-		view:            initView(db),
+		view:            initView(db, i18n),
+		report:          initReport(db, i18n),
 		csat:            initCSAT(db, i18n),
 		search:          initSearch(db, i18n),
 		role:            initRole(db, i18n),
 		tag:             initTag(db, i18n),
 		macro:           initMacro(db, i18n),
 		ai:              initAI(db, i18n),
+		webhook:         webhook,
 	}
 	app.consts.Store(constants)
 
@@ -273,6 +293,8 @@ func main() {
 	autoassigner.Close()
 	colorlog.Red("Shutting down notifier...")
 	notifier.Close()
+	colorlog.Red("Shutting down webhook...")
+	webhook.Close()
 	colorlog.Red("Shutting down conversation...")
 	conversation.Close()
 	colorlog.Red("Shutting down SLA...")

cmd/messages.go

@@ -2,11 +2,14 @@ package main
 
 import (
 	"strconv"
+	"strings"
 
 	amodels "github.com/abhinavxd/libredesk/internal/auth/models"
-	"github.com/abhinavxd/libredesk/internal/automation/models"
+	authzModels "github.com/abhinavxd/libredesk/internal/authz/models"
+	cmodels "github.com/abhinavxd/libredesk/internal/conversation/models"
 	"github.com/abhinavxd/libredesk/internal/envelope"
 	medModels "github.com/abhinavxd/libredesk/internal/media/models"
+	umodels "github.com/abhinavxd/libredesk/internal/user/models"
 	"github.com/valyala/fasthttp"
 	"github.com/zerodha/fastglue"
 )
@@ -18,6 +21,7 @@ type messageReq struct {
 	To          []string `json:"to"`
 	CC          []string `json:"cc"`
 	BCC         []string `json:"bcc"`
+	SenderType  string   `json:"sender_type"`
 }
 
 // handleGetMessages returns messages for a conversation.
@@ -100,7 +104,7 @@ func handleGetMessage(r *fastglue.Request) error {
 	return r.SendEnvelope(message)
 }
 
-// handleRetryMessage changes message status so it can be retried for sending.
+// handleRetryMessage changes message status to `pending`, so it's enqueued for sending.
 func handleRetryMessage(r *fastglue.Request) error {
 	var (
 		app   = r.Context.(*App)
@@ -132,7 +136,6 @@ func handleSendMessage(r *fastglue.Request) error {
 		app   = r.Context.(*App)
 		auser = r.RequestCtx.UserValue("user").(amodels.User)
 		cuuid = r.RequestCtx.UserValue("cuuid").(string)
-		media = []medModels.Media{}
 		req   = messageReq{}
 	)
 
@@ -152,7 +155,32 @@ func handleSendMessage(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
-	// Prepare attachments.
+	if req.SenderType != umodels.UserTypeAgent && req.SenderType != umodels.UserTypeContact {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`sender_type`"), nil, envelope.InputError)
+	}
+
+	// Contacts cannot send private messages
+	if req.SenderType == umodels.UserTypeContact && req.Private {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.T("globals.messages.badRequest"), nil, envelope.InputError)
+	}
+
+	// Check if user has permission to send messages as contact
+	if req.SenderType == umodels.UserTypeContact {
+		parts := strings.Split(authzModels.PermMessagesWriteAsContact, ":")
+		if len(parts) != 2 {
+			return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorChecking", "name", "{globals.terms.permission}"), nil))
+		}
+		ok, err := app.authz.Enforce(user, parts[0], parts[1])
+		if err != nil {
+			return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorChecking", "name", "{globals.terms.permission}"), nil))
+		}
+		if !ok {
+			return r.SendErrorEnvelope(fasthttp.StatusForbidden, app.i18n.Ts("globals.messages.denied", "name", "{globals.terms.permission}"), nil, envelope.PermissionError)
+		}
+	}
+
+	// Get media for all attachments.
+	var media = make([]medModels.Media, 0, len(req.Attachments))
 	for _, id := range req.Attachments {
 		m, err := app.media.Get(id, "")
 		if err != nil {
@@ -162,17 +190,28 @@ func handleSendMessage(r *fastglue.Request) error {
 		media = append(media, m)
 	}
 
-	if req.Private {
-		if err := app.conversation.SendPrivateNote(media, user.ID, cuuid, req.Message); err != nil {
+	// Create contact message.
+	if req.SenderType == umodels.UserTypeContact {
+		message, err := app.conversation.CreateContactMessage(media, int(conv.ContactID), cuuid, req.Message, cmodels.ContentTypeHTML)
+		if err != nil {
 			return sendErrorEnvelope(r, err)
 		}
-	} else {
-		if err := app.conversation.SendReply(media, conv.InboxID, user.ID, cuuid, req.Message, req.To, req.CC, req.BCC, map[string]any{} /**meta**/); err != nil {
-			return sendErrorEnvelope(r, err)
-		}
-		// Evaluate automation rules.
-		app.automation.EvaluateConversationUpdateRules(cuuid, models.EventConversationMessageOutgoing)
+		return r.SendEnvelope(message)
 	}
 
-	return r.SendEnvelope(true)
+	// Send private note.
+	if req.Private {
+		message, err := app.conversation.SendPrivateNote(media, user.ID, cuuid, req.Message)
+		if err != nil {
+			return sendErrorEnvelope(r, err)
+		}
+		return r.SendEnvelope(message)
+	}
+
+	// Queue reply.
+	message, err := app.conversation.QueueReply(media, conv.InboxID, user.ID, cuuid, req.Message, req.To, req.CC, req.BCC, map[string]any{} /**meta**/)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	return r.SendEnvelope(message)
 }

cmd/middlewares.go

@@ -6,30 +6,80 @@ import (
 
 	amodels "github.com/abhinavxd/libredesk/internal/auth/models"
 	"github.com/abhinavxd/libredesk/internal/envelope"
+	"github.com/abhinavxd/libredesk/internal/user/models"
 	"github.com/valyala/fasthttp"
 	"github.com/zerodha/fastglue"
 	"github.com/zerodha/simplesessions/v3"
 )
 
+// authenticateUser handles both API key and session-based authentication
+// Returns the authenticated user or an error
+// For session-based auth, CSRF is checked for POST/PUT/DELETE requests
+func authenticateUser(r *fastglue.Request, app *App) (models.User, error) {
+	var user models.User
+
+	// Check for Authorization header first (API key authentication)
+	apiKey, apiSecret, err := r.ParseAuthHeader(fastglue.AuthBasic | fastglue.AuthToken)
+	if err == nil && len(apiKey) > 0 && len(apiSecret) > 0 {
+		user, err = app.user.ValidateAPIKey(string(apiKey), string(apiSecret))
+		if err != nil {
+			return user, err
+		}
+		return user, nil
+	}
+
+	// Session-based authentication - Check CSRF first.
+	method := string(r.RequestCtx.Method())
+	if method == "POST" || method == "PUT" || method == "DELETE" {
+		cookieToken := string(r.RequestCtx.Request.Header.Cookie("csrf_token"))
+		hdrToken := string(r.RequestCtx.Request.Header.Peek("X-CSRFTOKEN"))
+
+		// Match CSRF token from cookie and header.
+		if cookieToken == "" || hdrToken == "" || cookieToken != hdrToken {
+			app.lo.Error("csrf token mismatch", "method", method, "cookie_token", cookieToken, "header_token", hdrToken)
+			return user, envelope.NewError(envelope.PermissionError, app.i18n.T("auth.csrfTokenMismatch"), nil)
+		}
+	}
+
+	// Validate session and fetch user.
+	sessUser, err := app.auth.ValidateSession(r)
+	if err != nil || sessUser.ID <= 0 {
+		app.lo.Error("error validating session", "error", err)
+		return user, envelope.NewError(envelope.GeneralError, app.i18n.T("auth.invalidOrExpiredSession"), nil)
+	}
+
+	// Get agent user from cache or load it.
+	user, err = app.user.GetAgentCachedOrLoad(sessUser.ID)
+	if err != nil {
+		return user, err
+	}
+
+	// Destroy session if user is disabled.
+	if !user.Enabled {
+		if err := app.auth.DestroySession(r); err != nil {
+			app.lo.Error("error destroying session", "error", err)
+		}
+		return user, envelope.NewError(envelope.PermissionError, app.i18n.T("user.accountDisabled"), nil)
+	}
+
+	return user, nil
+}
+
 // tryAuth attempts to authenticate the user and add them to the context but doesn't enforce authentication.
 // Handlers can check if user exists in context optionally.
+// Supports both API key authentication (Authorization header) and session-based authentication.
 func tryAuth(handler fastglue.FastRequestHandler) fastglue.FastRequestHandler {
 	return func(r *fastglue.Request) error {
 		app := r.Context.(*App)
 
-		// Try to validate session without returning error.
-		userSession, err := app.auth.ValidateSession(r)
-		if err != nil || userSession.ID <= 0 {
-			return handler(r)
-		}
-
-		// Try to get user.
-		user, err := app.user.GetAgent(userSession.ID, "")
+		// Try to authenticate user using shared authentication logic, but don't return errors
+		user, err := authenticateUser(r, app)
 		if err != nil {
+			// Authentication failed, but this is optional, so continue without user
 			return handler(r)
 		}
 
-		// Set user in context if found.
+		// Set user in context if authentication succeeded.
 		r.RequestCtx.SetUserValue("user", amodels.User{
 			ID:        user.ID,
 			Email:     user.Email.String,
@@ -41,23 +91,25 @@ func tryAuth(handler fastglue.FastRequestHandler) fastglue.FastRequestHandler {
 	}
 }
 
-// auth validates the session and adds the user to the request context.
+// auth validates the session or API key and adds the user to the request context.
+// Supports both API key authentication (Authorization header) and session-based authentication.
 func auth(handler fastglue.FastRequestHandler) fastglue.FastRequestHandler {
 	return func(r *fastglue.Request) error {
 		var app = r.Context.(*App)
 
-		// Validate session and fetch user.
-		userSession, err := app.auth.ValidateSession(r)
-		if err != nil || userSession.ID <= 0 {
-			app.lo.Error("error validating session", "error", err)
-			return r.SendErrorEnvelope(http.StatusUnauthorized, app.i18n.T("auth.invalidOrExpiredSession"), nil, envelope.GeneralError)
+		// Authenticate user using shared authentication logic
+		user, err := authenticateUser(r, app)
+		if err != nil {
+			if envErr, ok := err.(envelope.Error); ok {
+				if envErr.ErrorType == envelope.PermissionError {
+					return r.SendErrorEnvelope(http.StatusForbidden, envErr.Message, nil, envelope.PermissionError)
+				}
+				return r.SendErrorEnvelope(http.StatusUnauthorized, envErr.Message, nil, envelope.GeneralError)
+			}
+			return sendErrorEnvelope(r, err)
 		}
 
 		// Set user in the request context.
-		user, err := app.user.GetAgent(userSession.ID, "")
-		if err != nil {
-			return sendErrorEnvelope(r, err)
-		}
 		r.RequestCtx.SetUserValue("user", amodels.User{
 			ID:        user.ID,
 			Email:     user.Email.String,
@@ -69,41 +121,22 @@ func auth(handler fastglue.FastRequestHandler) fastglue.FastRequestHandler {
 	}
 }
 
-// perm matches the CSRF token and checks if the user has the required permission to access the endpoint.
-// and sets the user in the request context.
+// perm checks if the user has the required permission to access the endpoint.
+// Supports both API key authentication (Authorization header) and session-based authentication.
 func perm(handler fastglue.FastRequestHandler, perm string) fastglue.FastRequestHandler {
 	return func(r *fastglue.Request) error {
-		var (
-			app         = r.Context.(*App)
-			cookieToken = string(r.RequestCtx.Request.Header.Cookie("csrf_token"))
-			hdrToken    = string(r.RequestCtx.Request.Header.Peek("X-CSRFTOKEN"))
-		)
+		var app = r.Context.(*App)
 
-		// Match CSRF token from cookie and header.
-		if cookieToken == "" || hdrToken == "" || cookieToken != hdrToken {
-			app.lo.Error("csrf token mismatch", "cookie_token", cookieToken, "header_token", hdrToken)
-			return r.SendErrorEnvelope(http.StatusForbidden, app.i18n.T("auth.csrfTokenMismatch"), nil, envelope.PermissionError)
-		}
-
-		// Validate session and fetch user.
-		sessUser, err := app.auth.ValidateSession(r)
-		if err != nil || sessUser.ID <= 0 {
-			app.lo.Error("error validating session", "error", err)
-			return r.SendErrorEnvelope(http.StatusUnauthorized, app.i18n.T("auth.invalidOrExpiredSession"), nil, envelope.GeneralError)
-		}
-
-		// Get user from DB.
-		user, err := app.user.GetAgent(sessUser.ID, "")
+		// Authenticate user using shared authentication logic
+		user, err := authenticateUser(r, app)
 		if err != nil {
-			return sendErrorEnvelope(r, err)
-		}
-
-		// Destroy session if user is disabled.
-		if !user.Enabled {
-			if err := app.auth.DestroySession(r); err != nil {
-				app.lo.Error("error destroying session", "error", err)
+			if envErr, ok := err.(envelope.Error); ok {
+				if envErr.ErrorType == envelope.PermissionError {
+					return r.SendErrorEnvelope(http.StatusForbidden, envErr.Message, nil, envelope.PermissionError)
+				}
+				return r.SendErrorEnvelope(http.StatusUnauthorized, envErr.Message, nil, envelope.GeneralError)
 			}
-			return r.SendErrorEnvelope(http.StatusUnauthorized, app.i18n.T("user.accountDisabled"), nil, envelope.PermissionError)
+			return sendErrorEnvelope(r, err)
 		}
 
 		// Split the permission string into object and action and enforce it.

cmd/oidc.go

@@ -11,16 +11,6 @@ import (
 	"github.com/zerodha/fastglue"
 )
 
-// handleGetAllEnabledOIDC returns all enabled OIDC records
-func handleGetAllEnabledOIDC(r *fastglue.Request) error {
-	app := r.Context.(*App)
-	out, err := app.oidc.GetAllEnabled()
-	if err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-	return r.SendEnvelope(out)
-}
-
 // handleGetAllOIDC returns all OIDC records
 func handleGetAllOIDC(r *fastglue.Request) error {
 	app := r.Context.(*App)
@@ -50,18 +40,6 @@ func handleGetOIDC(r *fastglue.Request) error {
 	return r.SendEnvelope(o)
 }
 
-// handleTestOIDC tests an OIDC provider URL by doing a discovery on the provider URL.
-func handleTestOIDC(r *fastglue.Request) error {
-	var (
-		app         = r.Context.(*App)
-		providerURL = string(r.RequestCtx.PostArgs().Peek("provider_url"))
-	)
-	if err := app.auth.TestProvider(providerURL); err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-	return r.SendEnvelope(true)
-}
-
 // handleCreateOIDC creates a new OIDC record.
 func handleCreateOIDC(r *fastglue.Request) error {
 	var (
@@ -72,7 +50,13 @@ func handleCreateOIDC(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.GeneralError)
 	}
 
-	if err := app.oidc.Create(req); err != nil {
+	// Test OIDC provider URL by performing a discovery.
+	if err := app.auth.TestProvider(req.ProviderURL); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	createdOIDC, err := app.oidc.Create(req)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
@@ -80,7 +64,11 @@ func handleCreateOIDC(r *fastglue.Request) error {
 	if err := reloadAuth(app); err != nil {
 		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.couldNotReload", "name", "OIDC"), nil, envelope.GeneralError)
 	}
-	return r.SendEnvelope("OIDC created successfully")
+
+	// Clear client secret before returning
+	createdOIDC.ClientSecret = strings.Repeat(stringutil.PasswordDummy, 10)
+
+	return r.SendEnvelope(createdOIDC)
 }
 
 // handleUpdateOIDC updates an OIDC record.
@@ -98,7 +86,13 @@ func handleUpdateOIDC(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.GeneralError)
 	}
 
-	if err = app.oidc.Update(id, req); err != nil {
+	// Test OIDC provider URL by performing a discovery.
+	if err := app.auth.TestProvider(req.ProviderURL); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	updatedOIDC, err := app.oidc.Update(id, req)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
@@ -106,7 +100,11 @@ func handleUpdateOIDC(r *fastglue.Request) error {
 	if err := reloadAuth(app); err != nil {
 		return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.couldNotReload", "name", "OIDC"), nil, envelope.GeneralError)
 	}
-	return r.SendEnvelope(true)
+
+	// Clear client secret before returning
+	updatedOIDC.ClientSecret = strings.Repeat(stringutil.PasswordDummy, 10)
+
+	return r.SendEnvelope(updatedOIDC)
 }
 
 // handleDeleteOIDC deletes an OIDC record.

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)
+}

cmd/roles.go

@@ -55,10 +55,11 @@ func handleCreateRole(r *fastglue.Request) error {
 	if err := r.Decode(&req, "json"); err != nil {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
-	if err := app.role.Create(req); err != nil {
+	createdRole, err := app.role.Create(req)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(createdRole)
 }
 
 // handleUpdateRole updates a role
@@ -71,8 +72,9 @@ func handleUpdateRole(r *fastglue.Request) error {
 	if err := r.Decode(&req, "json"); err != nil {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
-	if err := app.role.Update(id, req); err != nil {
+	updatedRole, err := app.role.Update(id, req)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(updatedRole)
 }

cmd/settings.go

@@ -31,6 +31,8 @@ func handleGetGeneralSettings(r *fastglue.Request) error {
 	settings["app.update"] = app.update
 	// Set app version.
 	settings["app.version"] = versionString
+	// Set restart required flag.
+	settings["app.restart_required"] = app.restartRequired
 	return r.SendEnvelope(settings)
 }
 
@@ -45,6 +47,11 @@ func handleUpdateGeneralSettings(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.T("globals.messages.badRequest"), nil, envelope.InputError)
 	}
 
+	// Get current language before update.
+	app.Lock()
+	oldLang := ko.String("app.lang")
+	app.Unlock()
+
 	// Remove any trailing slash `/` from the root url.
 	req.RootURL = strings.TrimRight(req.RootURL, "/")
 
@@ -55,6 +62,17 @@ func handleUpdateGeneralSettings(r *fastglue.Request) error {
 	if err := reloadSettings(app); err != nil {
 		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.couldNotReload", "name", app.i18n.T("globals.terms.setting")), nil)
 	}
+
+	// Check if language changed and reload i18n if needed.
+	app.Lock()
+	newLang := ko.String("app.lang")
+	if oldLang != newLang {
+		app.lo.Info("language changed, reloading i18n", "old_lang", oldLang, "new_lang", newLang)
+		app.i18n = initI18n(app.fs)
+		app.lo.Info("reloaded i18n", "old_lang", oldLang, "new_lang", newLang)
+	}
+	app.Unlock()
+
 	if err := reloadTemplates(app); err != nil {
 		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.couldNotReload", "name", app.i18n.T("globals.terms.setting")), nil)
 	}
@@ -109,6 +127,7 @@ func handleUpdateEmailNotificationSettings(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.T("globals.messages.invalidFromAddress"), nil, envelope.InputError)
 	}
 
+	// If empty then retain previous password.
 	if req.Password == "" {
 		req.Password = cur.Password
 	}
@@ -117,6 +136,10 @@ func handleUpdateEmailNotificationSettings(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// No reload implemented, so user has to restart the app.
+	// Email notification settings require app restart to take effect.
+	app.Lock()
+	app.restartRequired = true
+	app.Unlock()
+
 	return r.SendEnvelope(true)
 }

cmd/sla.go

@@ -29,7 +29,7 @@ func handleGetSLA(r *fastglue.Request) error {
 	)
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "SLA `id`"), nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
 	sla, err := app.sla.Get(id)
@@ -54,11 +54,12 @@ func handleCreateSLA(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err := app.sla.Create(sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.Notifications); err != nil {
+	createdSLA, err := app.sla.Create(sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.NextResponseTime, sla.Notifications)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope("SLA created successfully.")
+	return r.SendEnvelope(createdSLA)
 }
 
 // handleUpdateSLA updates the SLA with the given ID.
@@ -70,7 +71,7 @@ func handleUpdateSLA(r *fastglue.Request) error {
 
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "SLA `id`"), nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
 	if err := r.Decode(&sla, "json"); err != nil {
@@ -81,11 +82,12 @@ func handleUpdateSLA(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err := app.sla.Update(id, sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.Notifications); err != nil {
+	updatedSLA, err := app.sla.Update(id, sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.NextResponseTime, sla.Notifications)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope("SLA updated successfully.")
+	return r.SendEnvelope(updatedSLA)
 }
 
 // handleDeleteSLA deletes the SLA with the given ID.
@@ -95,7 +97,7 @@ func handleDeleteSLA(r *fastglue.Request) error {
 	)
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "SLA `id`"), nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
 	if err = app.sla.Delete(id); err != nil {
@@ -108,51 +110,79 @@ func handleDeleteSLA(r *fastglue.Request) error {
 // validateSLA validates the SLA policy and returns an envelope.Error if any validation fails.
 func validateSLA(app *App, sla *smodels.SLAPolicy) error {
 	if sla.Name == "" {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA `name`"), nil)
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil)
 	}
-	if sla.FirstResponseTime == "" {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA `first_response_time`"), nil)
-	}
-	if sla.ResolutionTime == "" {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA `resolution_time`"), nil)
+	if sla.FirstResponseTime.String == "" && sla.NextResponseTime.String == "" && sla.ResolutionTime.String == "" {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "At least one of `first_response_time`, `next_response_time`, or `resolution_time` must be provided."), nil)
 	}
 
-	// Validate notifications if any
+	// Validate notifications if any.
 	for _, n := range sla.Notifications {
 		if n.Type == "" {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `type`"), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`type`"), nil)
 		}
 		if n.TimeDelayType == "" {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `time_delay_type`"), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`time_delay_type`"), nil)
+		}
+		if n.Metric == "" {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`metric`"), nil)
 		}
 		if n.TimeDelayType != "immediately" {
 			if n.TimeDelay == "" {
-				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `time_delay`"), nil)
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`time_delay`"), nil)
+			}
+			// Validate time delay duration.
+			td, err := time.ParseDuration(n.TimeDelay)
+			if err != nil {
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`time_delay`"), nil)
+			}
+			if td.Minutes() < 1 {
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`time_delay`"), nil)
 			}
 		}
 		if len(n.Recipients) == 0 {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `recipients`"), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`recipients`"), nil)
 		}
 	}
 
-	// Validate time duration strings
-	frt, err := time.ParseDuration(sla.FirstResponseTime)
-	if err != nil {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
-	}
-	if frt.Minutes() < 1 {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
+	// Validate first response time duration string if not empty.
+	if sla.FirstResponseTime.String != "" {
+		frt, err := time.ParseDuration(sla.FirstResponseTime.String)
+		if err != nil {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
+		}
+		if frt.Minutes() < 1 {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
+		}
 	}
 
-	rt, err := time.ParseDuration(sla.ResolutionTime)
-	if err != nil {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
+	// Validate resolution time duration string if not empty.
+	if sla.ResolutionTime.String != "" {
+		rt, err := time.ParseDuration(sla.ResolutionTime.String)
+		if err != nil {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
+		}
+		if rt.Minutes() < 1 {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
+		}
+		// Compare with first response time if both are present.
+		if sla.FirstResponseTime.String != "" {
+			frt, _ := time.ParseDuration(sla.FirstResponseTime.String)
+			if frt > rt {
+				return envelope.NewError(envelope.InputError, app.i18n.T("sla.firstResponseTimeAfterResolution"), nil)
+			}
+		}
 	}
-	if rt.Minutes() < 1 {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
-	}
-	if frt > rt {
-		return envelope.NewError(envelope.InputError, app.i18n.T("sla.firstResponseTimeAfterResolution"), nil)
+
+	// Validate next response time duration string if not empty.
+	if sla.NextResponseTime.String != "" {
+		nrt, err := time.ParseDuration(sla.NextResponseTime.String)
+		if err != nil {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`next_response_time`"), nil)
+		}
+		if nrt.Minutes() < 1 {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`next_response_time`"), nil)
+		}
 	}
 
 	return nil

cmd/statuses.go

@@ -33,12 +33,12 @@ func handleCreateStatus(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil, envelope.InputError)
 	}
 
-	err := app.status.Create(status.Name)
+	createdStatus, err := app.status.Create(status.Name)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(createdStatus)
 }
 
 func handleDeleteStatus(r *fastglue.Request) error {
@@ -74,10 +74,10 @@ func handleUpdateStatus(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil, envelope.InputError)
 	}
 
-	err = app.status.Update(id, status.Name)
+	updatedStatus, err := app.status.Update(id, status.Name)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(updatedStatus)
 }

cmd/tags.go

@@ -35,11 +35,12 @@ func handleCreateTag(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil, envelope.InputError)
 	}
 
-	if err := app.tag.Create(tag.Name); err != nil {
+	createdTag, err := app.tag.Create(tag.Name)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(createdTag)
 }
 
 // handleDeleteTag deletes a tag from the database.
@@ -78,9 +79,10 @@ func handleUpdateTag(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil, envelope.InputError)
 	}
 
-	if err = app.tag.Update(id, tag.Name); err != nil {
+	updatedTag, err := app.tag.Update(id, tag.Name)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(updatedTag)
 }

cmd/teams.go

@@ -4,8 +4,8 @@ import (
 	"strconv"
 
 	"github.com/abhinavxd/libredesk/internal/envelope"
+	"github.com/abhinavxd/libredesk/internal/team/models"
 	"github.com/valyala/fasthttp"
-	"github.com/volatiletech/null/v9"
 	"github.com/zerodha/fastglue"
 )
 
@@ -52,41 +52,42 @@ func handleGetTeam(r *fastglue.Request) error {
 // handleCreateTeam creates a new team.
 func handleCreateTeam(r *fastglue.Request) error {
 	var (
-		app                             = r.Context.(*App)
-		name                            = string(r.RequestCtx.PostArgs().Peek("name"))
-		timezone                        = string(r.RequestCtx.PostArgs().Peek("timezone"))
-		emoji                           = string(r.RequestCtx.PostArgs().Peek("emoji"))
-		conversationAssignmentType      = string(r.RequestCtx.PostArgs().Peek("conversation_assignment_type"))
-		businessHrsID, _                = strconv.Atoi(string(r.RequestCtx.PostArgs().Peek("business_hours_id")))
-		slaPolicyID, _                  = strconv.Atoi(string(r.RequestCtx.PostArgs().Peek("sla_policy_id")))
-		maxAutoAssignedConversations, _ = strconv.Atoi(string(r.RequestCtx.PostArgs().Peek("max_auto_assigned_conversations")))
+		app = r.Context.(*App)
+		req = models.Team{}
 	)
-	if err := app.team.Create(name, timezone, conversationAssignmentType, null.NewInt(businessHrsID, businessHrsID != 0), null.NewInt(slaPolicyID, slaPolicyID != 0), emoji, maxAutoAssignedConversations); err != nil {
+
+	if err := r.Decode(&req, "json"); err != nil {
+		return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil))
+	}
+
+	createdTeam, err := app.team.Create(req.Name, req.Timezone, req.ConversationAssignmentType, req.BusinessHoursID, req.SLAPolicyID, req.Emoji.String, req.MaxAutoAssignedConversations)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(createdTeam)
 }
 
 // handleUpdateTeam updates an existing team.
 func handleUpdateTeam(r *fastglue.Request) error {
 	var (
-		app                             = r.Context.(*App)
-		name                            = string(r.RequestCtx.PostArgs().Peek("name"))
-		timezone                        = string(r.RequestCtx.PostArgs().Peek("timezone"))
-		emoji                           = string(r.RequestCtx.PostArgs().Peek("emoji"))
-		conversationAssignmentType      = string(r.RequestCtx.PostArgs().Peek("conversation_assignment_type"))
-		id, _                           = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
-		businessHrsID, _                = strconv.Atoi(string(r.RequestCtx.PostArgs().Peek("business_hours_id")))
-		slaPolicyID, _                  = strconv.Atoi(string(r.RequestCtx.PostArgs().Peek("sla_policy_id")))
-		maxAutoAssignedConversations, _ = strconv.Atoi(string(r.RequestCtx.PostArgs().Peek("max_auto_assigned_conversations")))
+		app   = r.Context.(*App)
+		id, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
+		req   = models.Team{}
 	)
+
 	if id < 1 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, "Invalid team `id`", nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
-	if err := app.team.Update(id, name, timezone, conversationAssignmentType, null.NewInt(businessHrsID, businessHrsID != 0), null.NewInt(slaPolicyID, slaPolicyID != 0), emoji, maxAutoAssignedConversations); err != nil {
+
+	if err := r.Decode(&req, "json"); err != nil {
+		return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil))
+	}
+
+	updatedTeam, err := app.team.Update(id, req.Name, req.Timezone, req.ConversationAssignmentType, req.BusinessHoursID, req.SLAPolicyID, req.Emoji.String, req.MaxAutoAssignedConversations)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(updatedTeam)
 }
 
 // handleDeleteTeam deletes a team

cmd/templates.go

@@ -53,10 +53,11 @@ func handleCreateTemplate(r *fastglue.Request) error {
 	if req.Name == "" {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil, envelope.InputError)
 	}
-	if err := app.tmpl.Create(req); err != nil {
+	template, err := app.tmpl.Create(req)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(template)
 }
 
 // handleUpdateTemplate updates a template.
@@ -76,10 +77,11 @@ func handleUpdateTemplate(r *fastglue.Request) error {
 	if req.Name == "" {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil, envelope.InputError)
 	}
-	if err = app.tmpl.Update(id, req); err != nil {
+	updatedTemplate, err := app.tmpl.Update(id, req)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(updatedTemplate)
 }
 
 // handleDeleteTemplate deletes a template.

cmd/upgrade.go

@@ -34,6 +34,8 @@ var migList = []migFunc{
 	{"v0.4.0", migrations.V0_4_0},
 	{"v0.5.0", migrations.V0_5_0},
 	{"v0.6.0", migrations.V0_6_0},
+	{"v0.7.0", migrations.V0_7_0},
+	{"v0.7.4", migrations.V0_7_4},
 }
 
 // upgrade upgrades the database to the current version by running SQL migration files

cmd/users.go

@@ -26,11 +26,38 @@ const (
 	maxAvatarSizeMB = 2
 )
 
+type updateAvailabilityRequest struct {
+	Status string `json:"status"`
+}
+
+type resetPasswordRequest struct {
+	Email string `json:"email"`
+}
+
+type setPasswordRequest struct {
+	Token    string `json:"token"`
+	Password string `json:"password"`
+}
+
+type availabilityRequest struct {
+	Status string `json:"status"`
+}
+
+type agentReq struct {
+	FirstName          string   `json:"first_name"`
+	LastName           string   `json:"last_name"`
+	Email              string   `json:"email"`
+	SendWelcomeEmail   bool     `json:"send_welcome_email"`
+	Teams              []string `json:"teams"`
+	Roles              []string `json:"roles"`
+	Enabled            bool     `json:"enabled"`
+	AvailabilityStatus string   `json:"availability_status"`
+	NewPassword        string   `json:"new_password,omitempty"`
+}
+
 // handleGetAgents returns all agents.
 func handleGetAgents(r *fastglue.Request) error {
-	var (
-		app = r.Context.(*App)
-	)
+	var app = r.Context.(*App)
 	agents, err := app.user.GetAgents()
 	if err != nil {
 		return sendErrorEnvelope(r, err)
@@ -50,9 +77,7 @@ func handleGetAgentsCompact(r *fastglue.Request) error {
 
 // handleGetAgent returns an agent.
 func handleGetAgent(r *fastglue.Request) error {
-	var (
-		app = r.Context.(*App)
-	)
+	var app = r.Context.(*App)
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id <= 0 {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
@@ -67,37 +92,56 @@ func handleGetAgent(r *fastglue.Request) error {
 // handleUpdateAgentAvailability updates the current agent availability.
 func handleUpdateAgentAvailability(r *fastglue.Request) error {
 	var (
-		app    = r.Context.(*App)
-		auser  = r.RequestCtx.UserValue("user").(amodels.User)
-		status = string(r.RequestCtx.PostArgs().Peek("status"))
-		ip     = realip.FromRequest(r.RequestCtx)
+		app      = r.Context.(*App)
+		auser    = r.RequestCtx.UserValue("user").(amodels.User)
+		ip       = realip.FromRequest(r.RequestCtx)
+		availReq availabilityRequest
 	)
 
-	// Update availability status.
-	if err := app.user.UpdateAvailability(auser.ID, status); err != nil {
-		return sendErrorEnvelope(r, err)
+	// Decode JSON request
+	if err := r.Decode(&availReq, "json"); err != nil {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
-	// Create activity log.
-	if err := app.activityLog.UserAvailability(auser.ID, auser.Email, status, ip, "", 0); err != nil {
-		app.lo.Error("error creating activity log", "error", err)
-	}
-
-	return r.SendEnvelope(true)
-}
-
-// handleGetCurrentAgentTeams returns the teams of an agent.
-func handleGetCurrentAgentTeams(r *fastglue.Request) error {
-	var (
-		app   = r.Context.(*App)
-		auser = r.RequestCtx.UserValue("user").(amodels.User)
-	)
+	// Fetch entire agent
 	agent, err := app.user.GetAgent(auser.ID, "")
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	teams, err := app.team.GetUserTeams(agent.ID)
+	// Same status?
+	if agent.AvailabilityStatus == availReq.Status {
+		return r.SendEnvelope(agent)
+	}
+
+	// Update availability status
+	if err := app.user.UpdateAvailability(auser.ID, availReq.Status); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Skip activity log if agent returns online from away (to avoid spam).
+	if !(agent.AvailabilityStatus == models.Away && availReq.Status == models.Online) {
+		if err := app.activityLog.UserAvailability(auser.ID, auser.Email, availReq.Status, ip, "", 0); err != nil {
+			app.lo.Error("error creating activity log", "error", err)
+		}
+	}
+
+	// Fetch updated agent and return
+	agent, err = app.user.GetAgent(auser.ID, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	return r.SendEnvelope(agent)
+}
+
+// handleGetCurrentAgentTeams returns the teams of current agent.
+func handleGetCurrentAgentTeams(r *fastglue.Request) error {
+	var (
+		app   = r.Context.(*App)
+		auser = r.RequestCtx.UserValue("user").(amodels.User)
+	)
+	teams, err := app.team.GetUserTeams(auser.ID)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
@@ -110,11 +154,6 @@ func handleUpdateCurrentAgent(r *fastglue.Request) error {
 		app   = r.Context.(*App)
 		auser = r.RequestCtx.UserValue("user").(amodels.User)
 	)
-	agent, err := app.user.GetAgent(auser.ID, "")
-	if err != nil {
-		return sendErrorEnvelope(r, err)
-	}
-
 	form, err := r.RequestCtx.MultipartForm()
 	if err != nil {
 		app.lo.Error("error parsing form data", "error", err)
@@ -125,50 +164,53 @@ func handleUpdateCurrentAgent(r *fastglue.Request) error {
 
 	// Upload avatar?
 	if ok && len(files) > 0 {
-		if err := uploadUserAvatar(r, &agent, files); err != nil {
+		agent, err := app.user.GetAgent(auser.ID, "")
+		if err != nil {
+			return sendErrorEnvelope(r, err)
+		}
+		if err := uploadUserAvatar(r, agent, files); err != nil {
 			return sendErrorEnvelope(r, err)
 		}
 	}
-	return r.SendEnvelope(true)
+
+	// Fetch updated agent and return.
+	agent, err := app.user.GetAgent(auser.ID, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	return r.SendEnvelope(agent)
 }
 
 // handleCreateAgent creates a new agent.
 func handleCreateAgent(r *fastglue.Request) error {
 	var (
-		app  = r.Context.(*App)
-		user = models.User{}
+		app = r.Context.(*App)
+		req = agentReq{}
 	)
-	if err := r.Decode(&user, "json"); err != nil {
+
+	if err := r.Decode(&req, "json"); err != nil {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
-	if user.Email.String == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`email`"), nil, envelope.InputError)
+	// Validate agent request
+	if err := validateAgentRequest(r, &req); err != nil {
+		return err
 	}
 
-	if user.Roles == nil {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`role`"), nil, envelope.InputError)
-	}
-
-	if user.FirstName == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`first_name`"), nil, envelope.InputError)
-	}
-
-	// Right now, only agents can be created.
-	if err := app.user.CreateAgent(&user); err != nil {
+	agent, err := app.user.CreateAgent(req.FirstName, req.LastName, req.Email, req.Roles)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
 	// Upsert user teams.
-	if len(user.Teams) > 0 {
-		if err := app.team.UpsertUserTeams(user.ID, user.Teams.Names()); err != nil {
-			return sendErrorEnvelope(r, err)
-		}
+	if len(req.Teams) > 0 {
+		app.team.UpsertUserTeams(agent.ID, req.Teams)
 	}
 
-	if user.SendWelcomeEmail {
+	if req.SendWelcomeEmail {
 		// Generate reset token.
-		resetToken, err := app.user.SetResetPasswordToken(user.ID)
+		resetToken, err := app.user.SetResetPasswordToken(agent.ID)
 		if err != nil {
 			return sendErrorEnvelope(r, err)
 		}
@@ -176,53 +218,51 @@ func handleCreateAgent(r *fastglue.Request) error {
 		// Render template and send email.
 		content, err := app.tmpl.RenderInMemoryTemplate(tmpl.TmplWelcome, map[string]any{
 			"ResetToken": resetToken,
-			"Email":      user.Email.String,
+			"Email":      req.Email,
 		})
 		if err != nil {
 			app.lo.Error("error rendering template", "error", err)
-			return r.SendEnvelope(true)
 		}
 
 		if err := app.notifier.Send(notifier.Message{
-			RecipientEmails: []string{user.Email.String},
-			Subject:         "Welcome to Libredesk",
+			RecipientEmails: []string{req.Email},
+			Subject:         app.i18n.T("globals.messages.welcomeToLibredesk"),
 			Content:         content,
 			Provider:        notifier.ProviderEmail,
 		}); err != nil {
 			app.lo.Error("error sending notification message", "error", err)
-			return r.SendEnvelope(true)
 		}
 	}
-	return r.SendEnvelope(true)
+
+	// Refetch agent as other details might've changed.
+	agent, err = app.user.GetAgent(agent.ID, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	return r.SendEnvelope(agent)
 }
 
 // handleUpdateAgent updates an agent.
 func handleUpdateAgent(r *fastglue.Request) error {
 	var (
 		app   = r.Context.(*App)
-		user  = models.User{}
+		req   = agentReq{}
 		auser = r.RequestCtx.UserValue("user").(amodels.User)
 		ip    = realip.FromRequest(r.RequestCtx)
+		id, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	)
-	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
-	if err != nil || id == 0 {
+	if id == 0 {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`id`"), nil, envelope.InputError)
 	}
 
-	if err := r.Decode(&user, "json"); err != nil {
+	if err := r.Decode(&req, "json"); err != nil {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
 	}
 
-	if user.Email.String == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`email`"), nil, envelope.InputError)
-	}
-
-	if user.Roles == nil {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`role`"), nil, envelope.InputError)
-	}
-
-	if user.FirstName == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`first_name`"), nil, envelope.InputError)
+	// Validate agent request
+	if err := validateAgentRequest(r, &req); err != nil {
+		return err
 	}
 
 	agent, err := app.user.GetAgent(id, "")
@@ -231,24 +271,33 @@ func handleUpdateAgent(r *fastglue.Request) error {
 	}
 	oldAvailabilityStatus := agent.AvailabilityStatus
 
-	// Update agent.
-	if err = app.user.UpdateAgent(id, user); err != nil {
+	// Update agent with individual fields
+	if err = app.user.UpdateAgent(id, req.FirstName, req.LastName, req.Email, req.Roles, req.Enabled, req.AvailabilityStatus, req.NewPassword); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
+	// Invalidate authz cache.
+	defer app.authz.InvalidateUserCache(id)
+
 	// Create activity log if user availability status changed.
-	if oldAvailabilityStatus != user.AvailabilityStatus {
-		if err := app.activityLog.UserAvailability(auser.ID, auser.Email, user.AvailabilityStatus, ip, user.Email.String, id); err != nil {
+	if oldAvailabilityStatus != req.AvailabilityStatus {
+		if err := app.activityLog.UserAvailability(auser.ID, auser.Email, req.AvailabilityStatus, ip, req.Email, id); err != nil {
 			app.lo.Error("error creating activity log", "error", err)
 		}
 	}
 
 	// Upsert agent teams.
-	if err := app.team.UpsertUserTeams(id, user.Teams.Names()); err != nil {
+	if err := app.team.UpsertUserTeams(id, req.Teams); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope(true)
+	// Refetch agent and return.
+	agent, err = app.user.GetAgent(id, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	return r.SendEnvelope(agent)
 }
 
 // handleDeleteAgent soft deletes an agent.
@@ -328,22 +377,26 @@ func handleDeleteCurrentAgentAvatar(r *fastglue.Request) error {
 func handleResetPassword(r *fastglue.Request) error {
 	var (
 		app       = r.Context.(*App)
-		p         = r.RequestCtx.PostArgs()
 		auser, ok = r.RequestCtx.UserValue("user").(amodels.User)
-		email     = string(p.Peek("email"))
+		resetReq  resetPasswordRequest
 	)
 	if ok && auser.ID > 0 {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.T("user.userAlreadyLoggedIn"), nil, envelope.InputError)
 	}
 
-	if email == "" {
+	// Decode JSON request
+	if err := r.Decode(&resetReq, "json"); err != nil {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	if resetReq.Email == "" {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`email`"), nil, envelope.InputError)
 	}
 
-	agent, err := app.user.GetAgent(0, email)
+	agent, err := app.user.GetAgent(0, resetReq.Email)
 	if err != nil {
 		// Send 200 even if user not found, to prevent email enumeration.
-		return r.SendEnvelope("Reset password email sent successfully.")
+		return r.SendEnvelope(true)
 	}
 
 	token, err := app.user.SetResetPasswordToken(agent.ID)
@@ -378,20 +431,22 @@ func handleSetPassword(r *fastglue.Request) error {
 	var (
 		app       = r.Context.(*App)
 		agent, ok = r.RequestCtx.UserValue("user").(amodels.User)
-		p         = r.RequestCtx.PostArgs()
-		password  = string(p.Peek("password"))
-		token     = string(p.Peek("token"))
+		req       setPasswordRequest
 	)
 
 	if ok && agent.ID > 0 {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.T("user.userAlreadyLoggedIn"), nil, envelope.InputError)
 	}
 
-	if password == "" {
+	if err := r.Decode(&req, "json"); err != nil {
+		return sendErrorEnvelope(r, envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil))
+	}
+
+	if req.Password == "" {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "{globals.terms.password}"), nil, envelope.InputError)
 	}
 
-	if err := app.user.ResetPassword(token, password); err != nil {
+	if err := app.user.ResetPassword(req.Token, req.Password); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
@@ -399,13 +454,13 @@ func handleSetPassword(r *fastglue.Request) error {
 }
 
 // uploadUserAvatar uploads the user avatar.
-func uploadUserAvatar(r *fastglue.Request, user *models.User, files []*multipart.FileHeader) error {
+func uploadUserAvatar(r *fastglue.Request, user models.User, files []*multipart.FileHeader) error {
 	var app = r.Context.(*App)
 
 	fileHeader := files[0]
 	file, err := fileHeader.Open()
 	if err != nil {
-		app.lo.Error("error opening uploaded file", "error", err)
+		app.lo.Error("error opening uploaded file", "user_id", user.ID, "error", err)
 		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorReading", "name", "{globals.terms.file}"), nil)
 	}
 	defer file.Close()
@@ -422,7 +477,7 @@ func uploadUserAvatar(r *fastglue.Request, user *models.User, files []*multipart
 
 	// Check file size
 	if bytesToMegabytes(srcFileSize) > maxAvatarSizeMB {
-		app.lo.Error("error uploaded file size is larger than max allowed", "size", bytesToMegabytes(srcFileSize), "max_allowed", maxAvatarSizeMB)
+		app.lo.Error("error uploaded file size is larger than max allowed", "user_id", user.ID, "size", bytesToMegabytes(srcFileSize), "max_allowed", maxAvatarSizeMB)
 		return envelope.NewError(
 			envelope.InputError,
 			app.i18n.Ts("media.fileSizeTooLarge", "size", fmt.Sprintf("%dMB", maxAvatarSizeMB)),
@@ -439,25 +494,110 @@ func uploadUserAvatar(r *fastglue.Request, user *models.User, files []*multipart
 	meta := []byte("{}")
 	media, err := app.media.UploadAndInsert(srcFileName, srcContentType, contentID, linkedModel, linkedID, file, int(srcFileSize), disposition, meta)
 	if err != nil {
-		app.lo.Error("error uploading file", "error", err)
+		app.lo.Error("error uploading file", "user_id", user.ID, "error", err)
 		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorUploading", "name", "{globals.terms.file}"), nil)
 	}
 
 	// Delete current avatar.
 	if user.AvatarURL.Valid {
 		fileName := filepath.Base(user.AvatarURL.String)
-		app.media.Delete(fileName)
+		if err := app.media.Delete(fileName); err != nil {
+			app.lo.Error("error deleting user avatar", "user_id", user.ID, "error", err)
+		}
 	}
 
 	// Save file path.
 	path, err := stringutil.GetPathFromURL(media.URL)
 	if err != nil {
-		app.lo.Debug("error getting path from URL", "url", media.URL, "error", err)
+		app.lo.Debug("error getting path from URL", "user_id", user.ID, "url", media.URL, "error", err)
 		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorUploading", "name", "{globals.terms.file}"), nil)
 	}
-	fmt.Println("path", path)
+
 	if err := app.user.UpdateAvatar(user.ID, path); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 	return nil
 }
+
+// handleGenerateAPIKey generates a new API key for a user
+func handleGenerateAPIKey(r *fastglue.Request) error {
+	var (
+		app   = r.Context.(*App)
+		id, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
+	)
+	if id <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
+	}
+
+	// Check if user exists
+	user, err := app.user.GetAgent(id, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Generate API key and secret
+	apiKey, apiSecret, err := app.user.GenerateAPIKey(user.ID)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Return the API key and secret (only shown once)
+	response := struct {
+		APIKey    string `json:"api_key"`
+		APISecret string `json:"api_secret"`
+	}{
+		APIKey:    apiKey,
+		APISecret: apiSecret,
+	}
+
+	return r.SendEnvelope(response)
+}
+
+// handleRevokeAPIKey revokes a user's API key
+func handleRevokeAPIKey(r *fastglue.Request) error {
+	var (
+		app   = r.Context.(*App)
+		id, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
+	)
+	if id <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
+	}
+
+	// Check if user exists
+	_, err := app.user.GetAgent(id, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Revoke API key
+	if err := app.user.RevokeAPIKey(id); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	return r.SendEnvelope(true)
+}
+
+// validateAgentRequest validates common agent request fields and normalizes the email
+func validateAgentRequest(r *fastglue.Request, req *agentReq) error {
+	var app = r.Context.(*App)
+
+	// Normalize email
+	req.Email = strings.TrimSpace(strings.ToLower(req.Email))
+	if req.Email == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`email`"), nil, envelope.InputError)
+	}
+
+	if !stringutil.ValidEmail(req.Email) {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`email`"), nil, envelope.InputError)
+	}
+
+	if req.Roles == nil {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`role`"), nil, envelope.InputError)
+	}
+
+	if req.FirstName == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`first_name`"), nil, envelope.InputError)
+	}
+
+	return nil
+}

cmd/views.go

@@ -47,10 +47,11 @@ func handleCreateUserView(r *fastglue.Request) error {
 	if string(view.Filters) == "" {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.empty", "name", "`Filters`"), nil, envelope.InputError)
 	}
-	if err := app.view.Create(view.Name, view.Filters, user.ID); err != nil {
+	createdView, err := app.view.Create(view.Name, view.Filters, user.ID)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(createdView)
 }
 
 // handleDeleteUserView deletes a view for a user.
@@ -111,8 +112,9 @@ func handleUpdateUserView(r *fastglue.Request) error {
 	if v.UserID != user.ID {
 		return r.SendErrorEnvelope(fasthttp.StatusForbidden, app.i18n.Ts("globals.messages.denied", "name", "{globals.terms.permission}"), nil, envelope.PermissionError)
 	}
-	if err = app.view.Update(id, view.Name, view.Filters); err != nil {
+	updatedView, err := app.view.Update(id, view.Name, view.Filters)
+	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
-	return r.SendEnvelope(true)
+	return r.SendEnvelope(updatedView)
 }

cmd/webhooks.go

@@ -0,0 +1,191 @@
+package main
+
+import (
+	"strconv"
+	"strings"
+
+	"github.com/abhinavxd/libredesk/internal/envelope"
+	"github.com/abhinavxd/libredesk/internal/stringutil"
+	"github.com/abhinavxd/libredesk/internal/webhook/models"
+	"github.com/valyala/fasthttp"
+	"github.com/zerodha/fastglue"
+)
+
+// handleGetWebhooks returns all webhooks from the database.
+func handleGetWebhooks(r *fastglue.Request) error {
+	var (
+		app = r.Context.(*App)
+	)
+	webhooks, err := app.webhook.GetAll()
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	// Hide secrets.
+	for i := range webhooks {
+		if webhooks[i].Secret != "" {
+			webhooks[i].Secret = strings.Repeat(stringutil.PasswordDummy, 10)
+		}
+	}
+	return r.SendEnvelope(webhooks)
+}
+
+// handleGetWebhook returns a specific webhook by ID.
+func handleGetWebhook(r *fastglue.Request) error {
+	var (
+		app   = r.Context.(*App)
+		id, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
+	)
+	if id <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
+	}
+
+	webhook, err := app.webhook.Get(id)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Hide secret in the response.
+	if webhook.Secret != "" {
+		webhook.Secret = strings.Repeat(stringutil.PasswordDummy, 10)
+	}
+
+	return r.SendEnvelope(webhook)
+}
+
+// handleCreateWebhook creates a new webhook in the database.
+func handleCreateWebhook(r *fastglue.Request) error {
+	var (
+		app     = r.Context.(*App)
+		webhook = models.Webhook{}
+	)
+	if err := r.Decode(&webhook, "json"); err != nil {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), err.Error(), envelope.InputError)
+	}
+
+	// Validate webhook fields
+	if err := validateWebhook(app, webhook); err != nil {
+		return r.SendEnvelope(err)
+	}
+
+	webhook, err := app.webhook.Create(webhook)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Clear secret before returning
+	webhook.Secret = strings.Repeat(stringutil.PasswordDummy, 10)
+
+	return r.SendEnvelope(webhook)
+}
+
+// handleUpdateWebhook updates an existing webhook in the database.
+func handleUpdateWebhook(r *fastglue.Request) error {
+	var (
+		app     = r.Context.(*App)
+		webhook = models.Webhook{}
+		id, _   = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
+	)
+
+	if id <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
+	}
+
+	if err := r.Decode(&webhook, "json"); err != nil {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), err.Error(), envelope.InputError)
+	}
+
+	// Validate webhook fields
+	if err := validateWebhook(app, webhook); err != nil {
+		return r.SendEnvelope(err)
+	}
+
+	// If secret is empty or contains dummy characters, fetch existing webhook and preserve the secret
+	if webhook.Secret == "" || strings.Contains(webhook.Secret, stringutil.PasswordDummy) {
+		existingWebhook, err := app.webhook.Get(id)
+		if err != nil {
+			return sendErrorEnvelope(r, err)
+		}
+		webhook.Secret = existingWebhook.Secret
+	}
+
+	updatedWebhook, err := app.webhook.Update(id, webhook)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Clear secret before returning
+	updatedWebhook.Secret = strings.Repeat(stringutil.PasswordDummy, 10)
+
+	return r.SendEnvelope(updatedWebhook)
+}
+
+// handleDeleteWebhook deletes a webhook from the database.
+func handleDeleteWebhook(r *fastglue.Request) error {
+	var (
+		app   = r.Context.(*App)
+		id, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
+	)
+	if id <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
+	}
+
+	if err := app.webhook.Delete(id); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	return r.SendEnvelope(true)
+}
+
+// handleToggleWebhook toggles the active status of a webhook.
+func handleToggleWebhook(r *fastglue.Request) error {
+	var (
+		app   = r.Context.(*App)
+		id, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
+	)
+
+	if id <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
+	}
+
+	toggledWebhook, err := app.webhook.Toggle(id)
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Clear secret before returning
+	toggledWebhook.Secret = strings.Repeat(stringutil.PasswordDummy, 10)
+
+	return r.SendEnvelope(toggledWebhook)
+}
+
+// handleTestWebhook sends a test payload to a webhook.
+func handleTestWebhook(r *fastglue.Request) error {
+	var (
+		app   = r.Context.(*App)
+		id, _ = strconv.Atoi(r.RequestCtx.UserValue("id").(string))
+	)
+
+	if id <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
+	}
+
+	if err := app.webhook.SendTestWebhook(id); err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	return r.SendEnvelope(true)
+}
+
+// validateWebhook validates the webhook data.
+func validateWebhook(app *App, webhook models.Webhook) error {
+	if webhook.Name == "" {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil)
+	}
+	if webhook.URL == "" {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`url`"), nil)
+	}
+	if len(webhook.Events) == 0 {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`events`"), nil)
+	}
+	return nil
+}

config.sample.toml

@@ -1,80 +1,124 @@
-# App.
 [app]
+# Log level: info, debug, warn, error, fatal
 log_level = "debug"
+# Environment: dev, prod.
+# Setting to "dev" will enable color logging in terminal.
 env = "dev"
+# Whether to automatically check for application updates on start up, app updates are shown as a banner in the admin panel.
 check_updates = true
 
 # HTTP server.
 [app.server]
+# Address to bind the HTTP server to.
 address = "0.0.0.0:9000"
+# Unix socket path (leave empty to use TCP address instead)
 socket = ""
-# Do NOT disable secure cookies in production environment if you don't know
-# exactly what you're doing!
+# Do NOT disable secure cookies in production environment if you don't know exactly what you're doing!
 disable_secure_cookies = false
+# Request read and write timeouts.
 read_timeout = "5s"
 write_timeout = "5s"
-max_body_size = 500000000
+# Maximum request body size in bytes (100MB)
+# If you are using proxy, you may need to configure them to allow larger request bodies.
+max_body_size = 104857600
+# Size of the read buffer for incoming requests
 read_buffer_size = 4096
+# Keepalive settings.
 keepalive_timeout = "10s"
 
 # File upload provider to use, either `fs` or `s3`.
 [upload]
 provider = "fs"
 
-# Filesytem provider.
+# Filesystem provider.
 [upload.fs]
+# Directory where uploaded files are stored, make sure this directory exists and is writable by the application.
 upload_path = 'uploads'
 
 # S3 provider.
 [upload.s3]
+# S3 endpoint URL (required only for non-AWS S3-compatible providers like MinIO).
+# Leave empty to use default AWS endpoints.
 url = ""
+
+# AWS S3 credentials, keep empty to use attached IAM roles.
 access_key = ""
 secret_key = ""
+
+# AWS region, e.g., "us-east-1", "eu-west-1", etc.
 region = "ap-south-1"
-bucket = "bucket"
+# S3 bucket name where files will be stored.
+bucket = "bucket-name"
+# Optional prefix path within the S3 bucket where files will be stored.
+# Example, if set to "uploads/media", files will be stored under that path.
+# Useful for organizing files inside a shared bucket.
 bucket_path = ""
-expiry = "6h"
+# S3 signed URL expiry duration (e.g., "30m", "1h")
+expiry = "30m"
 
 # Postgres.
 [db]
-# If using docker compose, use the service name as the host. e.g. db
-host = "127.0.0.1"
+# If running locally, use `localhost`.
+host = "db"
+# Database port, default is 5432.
 port = 5432
 # Update the following values with your database credentials.
 user = "libredesk"
 password = "libredesk"
 database = "libredesk"
 ssl_mode = "disable"
+# Maximum number of open database connections
 max_open = 30
+# Maximum number of idle connections in the pool
 max_idle = 30
+# Maximum time a connection can be reused before being closed
 max_lifetime = "300s"
 
 # Redis.
 [redis]
-# If using docker compose, use the service name as the host. e.g. redis:6379
-address = "127.0.0.1:6379"
+# If running locally, use `localhost:6379`.
+address = "redis:6379"
 password = ""
 db = 0
 
 [message]
+# Number of workers processing outgoing message queue
 outgoing_queue_workers = 10
+# Number of workers processing incoming message queue
 incoming_queue_workers = 10
-message_outoing_scan_interval = "50ms"
+# How often to scan for outgoing messages to process, keep it low to process messages quickly.
+message_outgoing_scan_interval = "50ms"
+# Maximum number of messages that can be queued for incoming processing
 incoming_queue_size = 5000
+# Maximum number of messages that can be queued for outgoing processing
 outgoing_queue_size = 5000
 
 [notification]
+# Number of concurrent notification workers
 concurrency = 2
+# Maximum number of notifications that can be queued
 queue_size = 2000
 
 [automation]
+# Number of workers processing automation rules
 worker_count = 10
 
 [autoassigner]
+# How often to run automatic conversation assignment
 autoassign_interval = "5m"
 
+[webhook]
+# Number of webhook delivery workers
+workers = 5
+# Maximum number of webhook deliveries that can be queued
+queue_size = 10000
+# HTTP timeout for webhook requests
+timeout = "15s"
+
 [conversation]
+# How often to check for conversations to unsnooze
 unsnooze_interval = "5m"
 
 [sla]
+# How often to evaluate SLA compliance for conversations
 evaluation_interval = "5m"

docs/docs/developer-setup.md

@@ -1,31 +0,0 @@
-# Developer Setup
-
-Libredesk is a monorepo with a Go backend and a Vue.js frontend. The frontend uses Shadcn for UI components.
-
-### Pre-requisites
-
-- `go`
-- `nodejs` (if you are working on the frontend) and `pnpm`
-- Postgres database (>= 13)
-
-### First time setup
-
-Clone the repository:
-
-```sh
-git clone https://github.com/abhinavxd/libredesk.git
-```
-
-1. Copy `config.toml.sample` as `config.toml` and add your config.
-2. Run `make` to build the libredesk binary. Once the binary is built, run `./libredesk --install` to run the DB setup and set the System user password.
-
-### Running the Dev Environment
-
-1. Run `make run-backend` to start the libredesk backend dev server on `:9000`.
-2. Run `make run-frontend` to start the Vue frontend in dev mode using pnpm on `:8000`. Requests are proxied to the backend running on `:9000` check `vite.config.js` for the proxy config.
-
----
-
-# Production Build
-
-Run `make` to build the Go binary, build the Javascript frontend, and embed the static assets producing a single self-contained binary, `libredesk`.

docs/docs/index.md

@@ -1,13 +0,0 @@
-# Introduction
-
-Libredesk is an open source, self-hosted customer support desk. Single binary app.
-
-
-<div style="border: 1px solid #ccc; padding: 1px; border-radius:5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); background-color: #fff;">
-    <a href="https://libredesk.io">
-        <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-HvmxvOkalQSLp4qVezdTXaCd3dB4Rm.png" alt="libredesk screenshot" style="display: block; margin: 0 auto;">
-    </a>
-</div>
-
-## Developers
-Libredesk is a free and open source software licensed under AGPLv3. If you are interested in contributing, check out the [GitHub repository](https://github.com/abhinavxd/libredesk) and refer to the [developer setup](developer-setup.md). The backend is written in Go and the frontend is Vue js 3 with Shadcn for UI components.

docs/docs/installation.md

@@ -1,67 +0,0 @@
-# Installation
-
-Libredesk is a single binary application that requires postgres and redis to run. You can install it using the binary or docker.
-
-## Binary
-
-1. Download the [latest release](https://github.com/abhinavxd/libredesk/releases) and extract the libredesk binary.
-2. `./libredesk --install` to install the tables in the Postgres DB (⩾ 13) and set the System user password.
-3. Run `./libredesk` and visit `http://localhost:9000` and login with the email `System` and the password you set during installation.
-
-!!! Tip
-    To set the System user password during installation, set the environment variables:
-    `LIBREDESK_SYSTEM_USER_PASSWORD=xxxxxxxxxxx ./libredesk --install`
-
-
-## Docker
-
-The latest image is available on DockerHub at `libredesk/libredesk:latest`
-
-The recommended method is to download the [docker-compose.yml](https://github.com/abhinavxd/libredesk/blob/main/docker-compose.yml) file, customize it for your environment and then to simply run `docker compose up -d`.
-
-```shell
-# Download the compose file and the sample config file in the current directory.
-curl -LO https://github.com/abhinavxd/libredesk/raw/main/docker-compose.yml
-curl -LO https://github.com/abhinavxd/libredesk/raw/main/config.sample.toml
-
-# Copy the config.sample.toml to config.toml and edit it as needed.
-cp config.sample.toml config.toml
-
-# Edit config.toml and find commented lines containing "docker compose". Replace the values in the lines below those comments with service names instead of IP addresses.
-
-# Run the services in the background.
-docker compose up -d
-
-# Setting System user password.
-docker exec -it libredesk_app ./libredesk --set-system-user-password
-```
-
-Go to `http://localhost:9000` and login with the email `System` and the password you set using the `--set-system-user-password` command.
-
-
-## Compiling from source
-
-To compile the latest unreleased version (`main` branch):
-
-1. Make sure `go`, `nodejs`, and `pnpm` are installed on your system.
-2. `git clone git@github.com:abhinavxd/libredesk.git`
-3. `cd libredesk && make`. This will generate the `libredesk` binary.
-
-
-## Nginx
-
-Libredesk uses websockets for real-time updates. If you are using Nginx, you need to add the following (or similar) configuration to your Nginx configuration file.
-
-```nginx
-client_max_body_size 100M;
-location / {
-    proxy_pass http://localhost:9000;
-    proxy_http_version 1.1;
-    proxy_set_header Upgrade $http_upgrade;
-    proxy_set_header Connection 'upgrade';
-    proxy_set_header Host $host;
-    proxy_set_header X-Real-IP $remote_addr;
-    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    proxy_cache_bypass $http_upgrade;
-}
-```

docs/docs/sso.md

@@ -1,57 +0,0 @@
-# Setting up SSO
-
-Libredesk supports external OpenID Connect providers (e.g., Google, Keycloak) for signing in users.
-
-!!! note
-    User accounts must be created in Libredesk manually; signup is not supported.
-
-## Generic Configuration Steps
-
-Since each provider’s configuration might differ, consult your provider’s documentation for any additional or divergent settings.
-
-1. Provider setup:  
-   In your provider’s admin console, create a new OpenID Connect application/client. Retrieve:
-      - Client ID
-      - Client Secret
-
-2. Libredesk configuration: 
-   In Libredesk, navigate to Security > SSO and click New SSO and enter the following details:
-      - Provider URL (e.g., the URL of your OpenID provider)
-      - Client ID
-      - Client Secret
-      - A descriptive name for the connection
-
-3. Redirect URL:  
-   After saving, copy the generated Callback URL from Libredesk and add it as a valid redirect URI in your provider’s client settings.
-   
-## Provider Examples
-
-#### Keycloak
-
-1. Log in to your Keycloak Admin Console.
-
-2. In Keycloak, navigate to Clients and click Create:
-
-      - Client ID (e.g., `libredesk-app`)
-      - Client Protocol: `openid-connect`
-      - Root URL and Web Origins: your app domain (e.g., `https://ticket.example.com`)
-      - Under Authentication flow, uncheck everything except the standard flow
-      - Click save
-
-3. Go to the credentials tab:
-      - Ensure client authenticator is set to `Client Id and Secret`
-      - Note down the generated client secret
-
-4. In Libredesk, go to Admin > Security > SSO and click New SSO:
-      - Provider URL (e.g., `https://keycloak.example.com/realms/yourrealm`)
-      - Name (e.g., `Keycloak`)
-      - Client ID
-      - Client secret
-      - Click save
-
-5. After saving, click on the three dots and choose Edit to open the new SSO entry.
-
-6. Copy the generated Callback URL from Libredesk.
-
-7. Back in Keycloak, edit the client and add the Callback URL to Valid Redirect URIs:
-      - e.g., `https://ticket.example.com/api/v1/oidc/1/finish`

docs/docs/templating.md

@@ -1,43 +0,0 @@
-# Templating
-
-Templating in outgoing emails allows you to personalize content by embedding dynamic expressions like `{{ .Recipient.FullName }}`. These expressions reference fields from the conversation, contact, and recipient objects.
-
-## Outgoing Email Template Expressions
-
-If you want to customize the look of outgoing emails, you can do so in the Admin > Templates -> Outgoing Email Templates section. This template will be used for all outgoing emails including replies to conversations, notifications, and other system-generated emails.
-
-### Conversation Variables
-
-| Variable                        | Value                                                  |
-|---------------------------------|--------------------------------------------------------|
-| {{ .Conversation.ReferenceNumber }} | The unique reference number of the conversation     |
-| {{ .Conversation.Subject }}         | The subject of the conversation                     |
-| {{ .Conversation.UUID }}           | The unique identifier of the conversation            |
-
-### Contact Variables
-| Variable                     | Value                              |
-|------------------------------|------------------------------------|
-| {{ .Contact.FirstName }}     | First name of the contact/customer |
-| {{ .Contact.LastName }}      | Last name of the contact/customer  |
-| {{ .Contact.FullName }}      | Full name of the contact/customer  |
-| {{ .Contact.Email }}         | Email address of the contact/customer |
-
-### Recipient Variables
-| Variable                       | Value                             |
-|--------------------------------|-----------------------------------|
-| {{ .Recipient.FirstName }}     | First name of the recipient       |
-| {{ .Recipient.LastName }}      | Last name of the recipient        |
-| {{ .Recipient.FullName }}      | Full name of the recipient        |
-| {{ .Recipient.Email }}         | Email address of the recipient    |
-
-
-### Example outgoing email template
-
-```html
-Dear {{ .Recipient.FirstName }}
-{{ template "content" . }}
-Best regards,
-```
-Here, the `{{ template "content" . }}` serves as a placeholder for the body of the outgoing email. It will be replaced with the actual email content at the time of sending.
-
-Similarly, the `{{ .Recipient.FirstName }}` expression will dynamically insert the recipient's first name when the email is sent.

docs/docs/translations.md

@@ -1,3 +0,0 @@
-# Translations / Internationalization
-
-You can help translate libreDesk into different languages by contributing here: [LibreDesk Translation Project](https://crowdin.com/project/libredesk)

docs/docs/upgrade.md

@@ -1,18 +0,0 @@
-# Upgrade
-
-!!! warning "Warning"
-    Always take a backup of the Postgres database before upgrading Libredesk.
-
-## Binary
-- Stop running libredesk binary.
-- Download the [latest release](https://github.com/abhinavxd/libredesk/releases) and extract the libredesk binary and overwrite the previous version.
-- `./libredesk --upgrade` to upgrade an existing database schema. Upgrades are idempotent and running them multiple times have no side effects.
-- Run `./libredesk` again.
-
-## Docker
-
-```shell
-docker compose down app
-docker compose pull
-docker compose up app -d
-```

docs/mkdocs.yml

@@ -1,38 +0,0 @@
-site_name: Libredesk Documentation
-theme:
-  name: material
-  language: en
-  font:
-    text: Source Sans Pro
-    code: Roboto Mono
-    weights: 
-      - 400
-      - 700
-  direction: ltr
-  palette:
-    primary: white
-    accent: red
-  features:
-    - navigation.indexes
-    - navigation.sections
-    - content.code.copy
-  extra:
-    search:
-      language: en
-
-markdown_extensions:
-  - admonition
-  - codehilite
-  - toc:
-      permalink: true
-
-nav:
-  - Introduction: index.md
-  - Getting Started:
-      - Installation: installation.md
-      - Upgrade: upgrade.md
-      - Templating: templating.md
-      - SSO: sso.md
-  - Contributors:
-      - Developer setup: developer-setup.md
-      - Translations: translations.md

frontend/cypress/e2e/testLogin.cy.js

@@ -2,23 +2,33 @@
 
 describe('Login Component', () => {
     beforeEach(() => {
-        // Visit the login page
-        cy.visit('/')
-
         // Mock the API response for OIDC providers
-        cy.intercept('GET', '**/api/v1/oidc/enabled', {
+        cy.intercept('GET', '**/api/v1/config', {
             statusCode: 200,
             body: {
-                data: [
-                    {
-                        id: 1,
-                        name: 'Google',
-                        logo_url: 'https://example.com/google-logo.png',
-                        disabled: false
-                    }
-                ]
+                data: {
+                    "app.favicon_url": "http://localhost:9000/favicon.ico",
+                    "app.lang": "en",
+                    "app.logo_url": "http://localhost:9000/logo.png",
+                    "app.site_name": "Libredesk",
+                    "app.sso_providers": [
+                        {
+                            "client_id": "xx",
+                            "enabled": true,
+                            "id": 1,
+                            "logo_url": "/images/google-logo.png",
+                            "name": "Google",
+                            "provider": "Google",
+                            "provider_url": "https://accounts.google.com",
+                            "redirect_uri": "http://localhost:9000/api/v1/oidc/1/finish"
+                        }
+                    ]
+                }
             }
         }).as('getOIDCProviders')
+
+        // Visit the login page
+        cy.visit('/')
     })
 
     it('should display login form', () => {
@@ -38,7 +48,7 @@ describe('Login Component', () => {
 
     it('should show error for invalid login attempt', () => {
         // Mock failed login API call
-        cy.intercept('POST', '**/api/v1/login', {
+        cy.intercept('POST', '**/api/v1/auth/login', {
             statusCode: 401,
             body: {
                 message: 'Invalid credentials'
@@ -61,7 +71,7 @@ describe('Login Component', () => {
 
     it('should login successfully with correct credentials', () => {
         // Mock successful login API call
-        cy.intercept('POST', '**/api/v1/login', {
+        cy.intercept('POST', '**/api/v1/auth/login', {
             statusCode: 200,
             body: {
                 data: {
@@ -111,7 +121,7 @@ describe('Login Component', () => {
 
     it('should show loading state during login', () => {
         // Mock slow API response
-        cy.intercept('POST', '**/api/v1/login', {
+        cy.intercept('POST', '**/api/v1/auth/login', {
             statusCode: 200,
             body: {
                 data: {
@@ -132,7 +142,7 @@ describe('Login Component', () => {
 
         // Check if loading state is shown
         cy.contains('Logging in...').should('be.visible')
-        cy.get('svg.animate-spin').should('be.visible')
+        cy.get('.animate-spin').should('be.visible')
 
         // Wait for API call to finish
         cy.wait('@slowLogin')

frontend/index.html

@@ -6,8 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
     rel="stylesheet">
 </head>
 

frontend/package.json

@@ -1,12 +1,14 @@
 {
   "name": "libredesk",
-  "version": "0.6.0-alpha",
+  "version": "0.8.0-beta",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "pnpm exec vite",
     "build": "vite build",
     "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run",
     "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
     "test:e2e:ci": "cypress run --e2e --headless",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
@@ -16,6 +18,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@formkit/auto-animate": "^0.8.2",
     "@internationalized/date": "^3.5.5",
     "@radix-icons/vue": "^1.0.0",
@@ -33,12 +37,12 @@
     "@tiptap/vue-3": "^2.4.0",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
-    "@vee-validate/zod": "^4.13.2",
+    "@vee-validate/zod": "^4.15.0",
     "@vueuse/core": "^12.4.0",
-    "axios": "^1.8.2",
+    "axios": "^1.12.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "codeflask": "^1.4.1",
+    "codemirror": "^6.0.2",
     "date-fns": "^3.6.0",
     "lucide-vue-next": "^0.378.0",
     "mitt": "^3.0.1",
@@ -47,7 +51,7 @@
     "radix-vue": "^1.9.17",
     "reka-ui": "^2.2.0",
     "tailwind-merge": "^2.3.0",
-    "vee-validate": "^4.13.2",
+    "vee-validate": "^4.15.0",
     "vue": "^3.4.37",
     "vue-dompurify-html": "^5.2.0",
     "vue-i18n": "9",
@@ -57,7 +61,7 @@
     "vue-sonner": "^1.3.0",
     "vue3-emoji-picker": "^1.1.8",
     "vuedraggable": "^4.1.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -74,7 +78,8 @@
     "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
-    "vite": "^5.4.18"
+    "vite": "^5.4.20",
+    "vitest": "^3.2.2"
   },
   "packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a"
-}
+}

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex w-full h-screen">
+  <div class="flex w-full h-screen text-foreground">
     <!-- Icon sidebar always visible -->
     <SidebarProvider style="--sidebar-width: 3rem" class="w-auto z-50">
       <ShadcnSidebar collapsible="none" class="border-r">
@@ -8,38 +8,64 @@
             <SidebarGroupContent>
               <SidebarMenu>
                 <SidebarMenuItem>
-                  <SidebarMenuButton asChild :isActive="route.path.startsWith('/inboxes')">
-                    <router-link :to="{ name: 'inboxes' }">
-                      <Inbox />
-                    </router-link>
-                  </SidebarMenuButton>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <SidebarMenuButton asChild :isActive="route.path.startsWith('/inboxes')">
+                        <router-link :to="{ name: 'inboxes' }">
+                          <Inbox />
+                        </router-link>
+                      </SidebarMenuButton>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p>{{ t('globals.terms.inbox', 2) }}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </SidebarMenuItem>
-                <SidebarMenuItem>
-                  <SidebarMenuButton
-                    asChild
-                    :isActive="route.path.startsWith('/contacts')"
-                    v-if="userStore.can('contacts:read_all')"
-                  >
-                    <router-link :to="{ name: 'contacts' }">
-                      <BookUser />
-                    </router-link>
-                  </SidebarMenuButton>
+                <SidebarMenuItem v-if="userStore.can('contacts:read_all')">
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <SidebarMenuButton asChild :isActive="route.path.startsWith('/contacts')">
+                        <router-link :to="{ name: 'contacts' }">
+                          <BookUser />
+                        </router-link>
+                      </SidebarMenuButton>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p>{{ t('globals.terms.contact', 2) }}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </SidebarMenuItem>
                 <SidebarMenuItem v-if="userStore.hasReportTabPermissions">
-                  <SidebarMenuButton asChild :isActive="route.path.startsWith('/reports')">
-                    <router-link :to="{ name: 'reports' }">
-                      <FileLineChart />
-                    </router-link>
-                  </SidebarMenuButton>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <SidebarMenuButton asChild :isActive="route.path.startsWith('/reports')">
+                        <router-link :to="{ name: 'reports' }">
+                          <FileLineChart />
+                        </router-link>
+                      </SidebarMenuButton>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p>{{ t('globals.terms.report', 2) }}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </SidebarMenuItem>
                 <SidebarMenuItem v-if="userStore.hasAdminTabPermissions">
-                  <SidebarMenuButton asChild :isActive="route.path.startsWith('/admin')">
-                    <router-link
-                      :to="{ name: userStore.can('general_settings:manage') ? 'general' : 'admin' }"
-                    >
-                      <Shield />
-                    </router-link>
-                  </SidebarMenuButton>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <SidebarMenuButton asChild :isActive="route.path.startsWith('/admin')">
+                        <router-link
+                          :to="{
+                            name: userStore.can('general_settings:manage') ? 'general' : 'admin'
+                          }"
+                        >
+                          <Shield />
+                        </router-link>
+                      </SidebarMenuButton>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p>{{ t('globals.terms.admin') }}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </SidebarMenuItem>
               </SidebarMenu>
             </SidebarGroupContent>
@@ -62,8 +88,8 @@
         @create-conversation="() => (openCreateConversationDialog = true)"
       >
         <div class="flex flex-col h-screen">
-          <!-- Show app update only in admin routes -->
-          <AppUpdate v-if="route.path.startsWith('/admin')" />
+          <!-- Show admin banner only in admin routes -->
+          <AdminBanner v-if="route.path.startsWith('/admin')" />
 
           <!-- Common header for all pages -->
           <PageHeader />
@@ -80,7 +106,7 @@
   <Command />
 
   <!-- Create conversation dialog -->
-  <CreateConversation v-model="openCreateConversationDialog" />
+  <CreateConversation v-model="openCreateConversationDialog" v-if="openCreateConversationDialog" />
 </template>
 
 <script setup>
@@ -102,7 +128,7 @@ import { useCustomAttributeStore } from '@/stores/customAttributes'
 import { useIdleDetection } from '@/composables/useIdleDetection'
 import PageHeader from './components/layout/PageHeader.vue'
 import ViewForm from '@/features/view/ViewForm.vue'
-import AppUpdate from '@/components/update/AppUpdate.vue'
+import AdminBanner from '@/components/banner/AdminBanner.vue'
 import api from '@/api'
 import { toast as sooner } from 'vue-sonner'
 import Sidebar from '@/components/sidebar/Sidebar.vue'
@@ -122,6 +148,7 @@ import {
   SidebarMenuItem,
   SidebarProvider
 } from '@/components/ui/sidebar'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import SidebarNavUser from '@/components/sidebar/SidebarNavUser.vue'
 
 const route = useRoute()
@@ -185,7 +212,6 @@ const deleteView = async (view) => {
     })
   } catch (err) {
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
-      title: 'Error',
       variant: 'destructive',
       description: handleHTTPError(err).message
     })

frontend/src/Root.vue

@@ -1,9 +1,7 @@
 <template>
   <TooltipProvider :delay-duration="150">
-    <div class="!font-jakarta">
-      <Toaster class="pointer-events-auto" position="top-center" richColors />
-      <RouterView />
-    </div>
+    <Toaster class="pointer-events-auto" position="top-center" richColors />
+    <RouterView />
   </TooltipProvider>
 </template>
 

frontend/src/api/index.js

@@ -7,15 +7,15 @@ const http = axios.create({
 })
 
 function getCSRFToken () {
-  const name = 'csrf_token=';
-  const cookies = document.cookie.split(';');
+  const name = 'csrf_token='
+  const cookies = document.cookie.split(';')
   for (let i = 0; i < cookies.length; i++) {
-    let c = cookies[i].trim();
+    let c = cookies[i].trim()
     if (c.indexOf(name) === 0) {
-      return c.substring(name.length, c.length);
+      return c.substring(name.length, c.length)
     }
   }
-  return '';
+  return ''
 }
 
 // Request interceptor.
@@ -27,15 +27,20 @@ http.interceptors.request.use((request) => {
 
   // Set content type for POST/PUT requests if the content type is not set.
   if ((request.method === 'post' || request.method === 'put') && !request.headers['Content-Type']) {
-    request.headers['Content-Type'] = 'application/x-www-form-urlencoded'
+    request.headers['Content-Type'] = 'application/json'
+  }
+  
+  if (request.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
     request.data = qs.stringify(request.data)
   }
+  
   return request
 })
 
-const getCustomAttributes = (appliesTo) => http.get('/api/v1/custom-attributes', {
-  params: { applies_to: appliesTo }
-})
+const getCustomAttributes = (appliesTo) =>
+  http.get('/api/v1/custom-attributes', {
+    params: { applies_to: appliesTo }
+  })
 const createCustomAttribute = (data) =>
   http.post('/api/v1/custom-attributes', data, {
     headers: {
@@ -54,7 +59,8 @@ const searchConversations = (params) => http.get('/api/v1/conversations/search',
 const searchMessages = (params) => http.get('/api/v1/messages/search', { params })
 const searchContacts = (params) => http.get('/api/v1/contacts/search', { params })
 const getEmailNotificationSettings = () => http.get('/api/v1/settings/notifications/email')
-const updateEmailNotificationSettings = (data) => http.put('/api/v1/settings/notifications/email', data)
+const updateEmailNotificationSettings = (data) =>
+  http.put('/api/v1/settings/notifications/email', data)
 const getPriorities = () => http.get('/api/v1/priorities')
 const getStatuses = () => http.get('/api/v1/statuses')
 const createStatus = (data) => http.post('/api/v1/statuses', data)
@@ -81,11 +87,12 @@ const updateTemplate = (id, data) =>
 
 const getAllBusinessHours = () => http.get('/api/v1/business-hours')
 const getBusinessHours = (id) => http.get(`/api/v1/business-hours/${id}`)
-const createBusinessHours = (data) => http.post('/api/v1/business-hours', data, {
-  headers: {
-    'Content-Type': 'application/json'
-  }
-})
+const createBusinessHours = (data) =>
+  http.post('/api/v1/business-hours', data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
 const updateBusinessHours = (id, data) =>
   http.put(`/api/v1/business-hours/${id}`, data, {
     headers: {
@@ -96,16 +103,18 @@ const deleteBusinessHours = (id) => http.delete(`/api/v1/business-hours/${id}`)
 
 const getAllSLAs = () => http.get('/api/v1/sla')
 const getSLA = (id) => http.get(`/api/v1/sla/${id}`)
-const createSLA = (data) => http.post('/api/v1/sla', data, {
-  headers: {
-    'Content-Type': 'application/json'
-  }
-})
-const updateSLA = (id, data) => http.put(`/api/v1/sla/${id}`, data, {
-  headers: {
-    'Content-Type': 'application/json'
-  }
-})
+const createSLA = (data) =>
+  http.post('/api/v1/sla', data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const updateSLA = (id, data) =>
+  http.put(`/api/v1/sla/${id}`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
 const deleteSLA = (id) => http.delete(`/api/v1/sla/${id}`)
 const createOIDC = (data) =>
   http.post('/api/v1/oidc', data, {
@@ -113,8 +122,7 @@ const createOIDC = (data) =>
       'Content-Type': 'application/json'
     }
   })
-const testOIDC = (data) => http.post('/api/v1/oidc/test', data)
-const getAllEnabledOIDC = () => http.get('/api/v1/oidc/enabled')
+const getConfig = () => http.get('/api/v1/config')
 const getAllOIDC = () => http.get('/api/v1/oidc')
 const getOIDC = (id) => http.get(`/api/v1/oidc/${id}`)
 const updateOIDC = (id, data) =>
@@ -131,7 +139,11 @@ const updateSettings = (key, data) =>
     }
   })
 const getSettings = (key) => http.get(`/api/v1/settings/${key}`)
-const login = (data) => http.post(`/api/v1/login`, data)
+const login = (data) => http.post(`/api/v1/auth/login`, data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
 const getAutomationRules = (type) =>
   http.get(`/api/v1/automations/rules`, {
     params: { type: type }
@@ -157,7 +169,12 @@ const updateAutomationRuleWeights = (data) =>
       'Content-Type': 'application/json'
     }
   })
-const updateAutomationRulesExecutionMode = (data) => http.put(`/api/v1/automations/rules/execution-mode`, data)
+const updateAutomationRulesExecutionMode = (data) =>
+  http.put(`/api/v1/automations/rules/execution-mode`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
 const getRoles = () => http.get('/api/v1/roles')
 const getRole = (id) => http.get(`/api/v1/roles/${id}`)
 const createRole = (data) =>
@@ -175,16 +192,29 @@ const updateRole = (id, data) =>
 const deleteRole = (id) => http.delete(`/api/v1/roles/${id}`)
 const getContacts = (params) => http.get('/api/v1/contacts', { params })
 const getContact = (id) => http.get(`/api/v1/contacts/${id}`)
-const updateContact = (id, data) => http.put(`/api/v1/contacts/${id}`, data, {
+const updateContact = (id, data) =>
+  http.put(`/api/v1/contacts/${id}`, data, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+const blockContact = (id, data) => http.put(`/api/v1/contacts/${id}/block`, data, {
   headers: {
-    'Content-Type': 'multipart/form-data'
+    'Content-Type': 'application/json'
   }
 })
-const blockContact = (id, data) => http.put(`/api/v1/contacts/${id}/block`, data)
 const getTeam = (id) => http.get(`/api/v1/teams/${id}`)
 const getTeams = () => http.get('/api/v1/teams')
-const updateTeam = (id, data) => http.put(`/api/v1/teams/${id}`, data)
-const createTeam = (data) => http.post('/api/v1/teams', data)
+const updateTeam = (id, data) => http.put(`/api/v1/teams/${id}`, data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+const createTeam = (data) => http.post('/api/v1/teams', data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
 const getTeamsCompact = () => http.get('/api/v1/teams/compact')
 const deleteTeam = (id) => http.delete(`/api/v1/teams/${id}`)
 const updateUser = (id, data) =>
@@ -205,9 +235,21 @@ const getUser = (id) => http.get(`/api/v1/agents/${id}`)
 const deleteUserAvatar = () => http.delete('/api/v1/agents/me/avatar')
 const getCurrentUser = () => http.get('/api/v1/agents/me')
 const getCurrentUserTeams = () => http.get('/api/v1/agents/me/teams')
-const updateCurrentUserAvailability = (data) => http.put('/api/v1/agents/me/availability', data)
-const resetPassword = (data) => http.post('/api/v1/agents/reset-password', data)
-const setPassword = (data) => http.post('/api/v1/agents/set-password', data)
+const updateCurrentUserAvailability = (data) => http.put('/api/v1/agents/me/availability', data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+const resetPassword = (data) => http.post('/api/v1/agents/reset-password', data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+const setPassword = (data) => http.post('/api/v1/agents/set-password', data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
 const deleteUser = (id) => http.delete(`/api/v1/agents/${id}`)
 const createUser = (data) =>
   http.post('/api/v1/agents', data, {
@@ -216,28 +258,56 @@ const createUser = (data) =>
     }
   })
 const getTags = () => http.get('/api/v1/tags')
-const upsertTags = (uuid, data) => http.post(`/api/v1/conversations/${uuid}/tags`, data)
-const updateAssignee = (uuid, assignee_type, data) => http.put(`/api/v1/conversations/${uuid}/assignee/${assignee_type}`, data)
-const removeAssignee = (uuid, assignee_type) => http.put(`/api/v1/conversations/${uuid}/assignee/${assignee_type}/remove`)
-const updateContactCustomAttribute = (uuid, data) => http.put(`/api/v1/conversations/${uuid}/contacts/custom-attributes`, data,
-  {
+const upsertTags = (uuid, data) => http.post(`/api/v1/conversations/${uuid}/tags`, data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+const updateAssignee = (uuid, assignee_type, data) =>
+  http.put(`/api/v1/conversations/${uuid}/assignee/${assignee_type}`, data, {
     headers: {
       'Content-Type': 'application/json'
     }
   })
-const updateConversationCustomAttribute = (uuid, data) => http.put(`/api/v1/conversations/${uuid}/custom-attributes`, data,
-  {
+const removeAssignee = (uuid, assignee_type) =>
+  http.put(`/api/v1/conversations/${uuid}/assignee/${assignee_type}/remove`)
+const updateContactCustomAttribute = (uuid, data) =>
+  http.put(`/api/v1/conversations/${uuid}/contacts/custom-attributes`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const updateConversationCustomAttribute = (uuid, data) =>
+  http.put(`/api/v1/conversations/${uuid}/custom-attributes`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const createConversation = (data) =>
+  http.post('/api/v1/conversations', data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const updateConversationStatus = (uuid, data) =>
+  http.put(`/api/v1/conversations/${uuid}/status`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const updateConversationPriority = (uuid, data) =>
+  http.put(`/api/v1/conversations/${uuid}/priority`, data, {
     headers: {
       'Content-Type': 'application/json'
     }
   })
-const createConversation = (data) => http.post('/api/v1/conversations', data)
-const updateConversationStatus = (uuid, data) => http.put(`/api/v1/conversations/${uuid}/status`, data)
-const updateConversationPriority = (uuid, data) => http.put(`/api/v1/conversations/${uuid}/priority`, data)
 const updateAssigneeLastSeen = (uuid) => http.put(`/api/v1/conversations/${uuid}/last-seen`)
-const getConversationMessage = (cuuid, uuid) => http.get(`/api/v1/conversations/${cuuid}/messages/${uuid}`)
-const retryMessage = (cuuid, uuid) => http.put(`/api/v1/conversations/${cuuid}/messages/${uuid}/retry`)
-const getConversationMessages = (uuid, params) => http.get(`/api/v1/conversations/${uuid}/messages`, { params })
+const getConversationMessage = (cuuid, uuid) =>
+  http.get(`/api/v1/conversations/${cuuid}/messages/${uuid}`)
+const retryMessage = (cuuid, uuid) =>
+  http.put(`/api/v1/conversations/${cuuid}/messages/${uuid}/retry`)
+const getConversationMessages = (uuid, params) =>
+  http.get(`/api/v1/conversations/${uuid}/messages`, { params })
 const sendMessage = (uuid, data) =>
   http.post(`/api/v1/conversations/${uuid}/messages`, data, {
     headers: {
@@ -248,28 +318,33 @@ const getConversation = (uuid) => http.get(`/api/v1/conversations/${uuid}`)
 const getConversationParticipants = (uuid) => http.get(`/api/v1/conversations/${uuid}/participants`)
 const getAllMacros = () => http.get('/api/v1/macros')
 const getMacro = (id) => http.get(`/api/v1/macros/${id}`)
-const createMacro = (data) => http.post('/api/v1/macros', data, {
-  headers: {
-    'Content-Type': 'application/json'
-  }
-})
-const updateMacro = (id, data) => http.put(`/api/v1/macros/${id}`, data, {
-  headers: {
-    'Content-Type': 'application/json'
-  }
-})
+const createMacro = (data) =>
+  http.post('/api/v1/macros', data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const updateMacro = (id, data) =>
+  http.put(`/api/v1/macros/${id}`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
 const deleteMacro = (id) => http.delete(`/api/v1/macros/${id}`)
-const applyMacro = (uuid, id, data) => http.post(`/api/v1/conversations/${uuid}/macros/${id}/apply`, data, {
-  headers: {
-    'Content-Type': 'application/json'
-  }
-})
+const applyMacro = (uuid, id, data) =>
+  http.post(`/api/v1/conversations/${uuid}/macros/${id}/apply`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
 const getTeamUnassignedConversations = (teamID, params) =>
   http.get(`/api/v1/teams/${teamID}/conversations/unassigned`, { params })
 const getAssignedConversations = (params) => http.get('/api/v1/conversations/assigned', { params })
-const getUnassignedConversations = (params) => http.get('/api/v1/conversations/unassigned', { params })
+const getUnassignedConversations = (params) =>
+  http.get('/api/v1/conversations/unassigned', { params })
 const getAllConversations = (params) => http.get('/api/v1/conversations/all', { params })
-const getViewConversations = (id, params) => http.get(`/api/v1/views/${id}/conversations`, { params })
+const getViewConversations = (id, params) =>
+  http.get(`/api/v1/views/${id}/conversations`, { params })
 const uploadMedia = (data) =>
   http.post('/api/v1/media', data, {
     headers: {
@@ -277,7 +352,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, {
@@ -310,12 +386,50 @@ const updateView = (id, data) =>
   })
 const deleteView = (id) => http.delete(`/api/v1/views/me/${id}`)
 const getAiPrompts = () => http.get('/api/v1/ai/prompts')
-const aiCompletion = (data) => http.post('/api/v1/ai/completion', data)
-const updateAIProvider = (data) => http.put('/api/v1/ai/provider', data)
+const aiCompletion = (data) => http.post('/api/v1/ai/completion', data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+const updateAIProvider = (data) => http.put('/api/v1/ai/provider', data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
 const getContactNotes = (id) => http.get(`/api/v1/contacts/${id}/notes`)
-const createContactNote = (id, data) => http.post(`/api/v1/contacts/${id}/notes`, data)
+const createContactNote = (id, data) => http.post(`/api/v1/contacts/${id}/notes`, data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
 const deleteContactNote = (id, noteId) => http.delete(`/api/v1/contacts/${id}/notes/${noteId}`)
 const getActivityLogs = (params) => http.get('/api/v1/activity-logs', { params })
+const getWebhooks = () => http.get('/api/v1/webhooks')
+const getWebhook = (id) => http.get(`/api/v1/webhooks/${id}`)
+const createWebhook = (data) =>
+  http.post('/api/v1/webhooks', data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const updateWebhook = (id, data) =>
+  http.put(`/api/v1/webhooks/${id}`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const deleteWebhook = (id) => http.delete(`/api/v1/webhooks/${id}`)
+const toggleWebhook = (id) => http.put(`/api/v1/webhooks/${id}/toggle`)
+const testWebhook = (id) => http.post(`/api/v1/webhooks/${id}/test`)
+
+const generateAPIKey = (id) => 
+  http.post(`/api/v1/agents/${id}/api-key`, {}, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+
+const revokeAPIKey = (id) => http.delete(`/api/v1/agents/${id}/api-key`)
 
 export default {
   login,
@@ -356,6 +470,7 @@ export default {
   getViewConversations,
   getOverviewCharts,
   getOverviewCounts,
+  getOverviewSLA,
   getConversationParticipants,
   getConversationMessage,
   getConversationMessages,
@@ -399,10 +514,9 @@ export default {
   updateSettings,
   createOIDC,
   getAllOIDC,
-  getAllEnabledOIDC,
+  getConfig,
   getOIDC,
   updateOIDC,
-  testOIDC,
   deleteOIDC,
   getTemplate,
   getTemplates,
@@ -444,5 +558,14 @@ export default {
   getContactNotes,
   createContactNote,
   deleteContactNote,
-  getActivityLogs
+  getActivityLogs,
+  getWebhooks,
+  getWebhook,
+  createWebhook,
+  updateWebhook,
+  deleteWebhook,
+  toggleWebhook,
+  testWebhook,
+  generateAPIKey,
+  revokeAPIKey
 }

frontend/src/assets/styles/main.scss

@@ -13,12 +13,20 @@
     min-height: 100%;
     overflow: hidden;
     margin: 0;
+    @apply bg-background text-foreground;
+  }
 
-    @media (max-width: 768px) {
+  @media (max-width: 768px) {
+    html,
+    body {
       overflow-x: auto;
     }
   }
 
+  * {
+    @apply border-border;
+  }
+
   .native-html {
     p {
       margin-bottom: 0.5rem;
@@ -61,10 +69,39 @@
       }
     }
   }
-}
+  :root {
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 240 5.9% 10%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  :root {
+    --vis-tooltip-background-color: none !important;
+    --vis-tooltip-border-color: none !important;
+    --vis-tooltip-text-color: none !important;
+    --vis-tooltip-shadow-color: none !important;
+    --vis-tooltip-backdrop-filter: none !important;
+    --vis-tooltip-padding: none !important;
+    --vis-primary-color: var(--primary);
+    --vis-secondary-color: 160 81% 40%;
+    --vis-text-color: var(--muted-foreground);
+  }
 
-// Theme.
-@layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
@@ -97,13 +134,13 @@
   }
 
   .dark {
-    --background: 240 10% 3.9%;
+    --background: 240 5.9% 10%;
     --foreground: 0 0% 98%;
 
-    --card: 240 10% 3.9%;
+    --card: 240 5.9% 10%;
     --card-foreground: 0 0% 98%;
 
-    --popover: 240 10% 3.9%;
+    --popover: 240 5.9% 10%;
     --popover-foreground: 0 0% 98%;
 
     --primary: 0 0% 98%;
@@ -127,64 +164,8 @@
   }
 }
 
-@layer base {
-  :root {
-    --vis-tooltip-background-color: none !important;
-    --vis-tooltip-border-color: none !important;
-    --vis-tooltip-text-color: none !important;
-    --vis-tooltip-shadow-color: none !important;
-    --vis-tooltip-backdrop-filter: none !important;
-    --vis-tooltip-padding: none !important;
-    --vis-primary-color: var(--primary);
-    --vis-secondary-color: 160 81% 40%;
-    --vis-text-color: var(--muted-foreground);
-  }
-}
-
-// Shake animation
-@keyframes shake {
-  0% {
-    transform: translateX(0);
-  }
-  15% {
-    transform: translateX(-5px);
-  }
-  25% {
-    transform: translateX(5px);
-  }
-  35% {
-    transform: translateX(-5px);
-  }
-  45% {
-    transform: translateX(5px);
-  }
-  55% {
-    transform: translateX(-5px);
-  }
-  65% {
-    transform: translateX(5px);
-  }
-  75% {
-    transform: translateX(-5px);
-  }
-  85% {
-    transform: translateX(5px);
-  }
-  95% {
-    transform: translateX(-5px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-.animate-shake {
-  animation: shake 0.5s infinite;
-}
-
 .message-bubble {
-  @apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded-xl;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  @apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded shadow-sm;
   table {
     width: 100% !important;
     table-layout: fixed !important;
@@ -200,7 +181,11 @@
 }
 
 .box {
-  @apply border shadow rounded-lg;
+  @apply border shadow rounded;
+}
+
+.loading-fade {
+  @apply opacity-50 transition-opacity duration-300
 }
 
 // Scrollbar start
@@ -226,85 +211,6 @@
 }
 // End Scrollbar
 
-.code-editor {
-  @apply rounded-md border shadow h-[65vh] min-h-[250px] w-full relative;
-}
-
-.ql-container {
-  margin: 0 !important;
-}
-
-.ql-container .ql-editor {
-  height: 300px !important;
-  border-radius: var(--radius) !important;
-  @apply rounded-lg rounded-t-none;
-}
-
-.ql-toolbar {
-  @apply rounded-t-lg;
-}
-
-.blinking-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background-color: red;
-  border-radius: 50%;
-  animation: blink 2s infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
-// Sidebar start
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 96%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-a[data-active='true'] {
-  background-color: hsl(var(--sidebar-background)) !important;
-  color: hsl(var(--sidebar-accent-foreground)) !important;
-  font-weight: 500;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-a[data-active='false']:hover {
-  background-color: hsl(var(--sidebar-accent)) !important;
-  color: hsl(var(--sidebar-accent-foreground)) !important;
-  font-weight: 500;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-// Sidebar end
-
 .show-quoted-text {
   blockquote {
     @apply block;
@@ -317,37 +223,6 @@ a[data-active='false']:hover {
   }
 }
 
-.dot-loader {
-  display: inline-flex;
-  align-items: center;
-}
-
-.dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: currentColor;
-  margin: 0 2px;
-  animation: dot-flashing 1s infinite linear alternate;
-}
-
-.dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes dot-flashing {
-  0% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 [data-radix-popper-content-wrapper] {
   z-index: 9999 !important;
 }

frontend/src/components/banner/AdminBanner.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="border-b">
+    <!-- Update notification -->
+    <div
+      v-if="appSettingsStore.settings['app.update']?.update?.is_new"
+      class="px-4 py-2.5 border-b border-border/50 last:border-b-0"
+    >
+      <div class="flex items-center gap-3">
+        <div class="flex-shrink-0">
+          <Download class="w-5 h-5 text-primary" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-2 text-sm text-foreground">
+            <span>{{ $t('update.newUpdateAvailable') }}</span>
+            <a
+              :href="appSettingsStore.settings['app.update'].update.url"
+              target="_blank"
+              rel="nofollow noreferrer"
+              class="font-semibold text-primary hover:text-primary/80 underline transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+            >
+              {{ appSettingsStore.settings['app.update'].update.release_version }}
+            </a>
+            <span class="text-muted-foreground">•</span>
+            <span class="text-muted-foreground">
+              {{ appSettingsStore.settings['app.update'].update.release_date }}
+            </span>
+          </div>
+
+          <!-- Update description -->
+          <div
+            v-if="appSettingsStore.settings['app.update'].update.description"
+            class="mt-2 text-xs text-muted-foreground"
+          >
+            {{ appSettingsStore.settings['app.update'].update.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Restart required notification -->
+    <div
+      v-if="appSettingsStore.settings['app.restart_required']"
+      class="px-4 py-2.5 border-b border-border/50 last:border-b-0"
+    >
+      <div class="flex items-center gap-3">
+        <div class="flex-shrink-0">
+          <Info class="w-5 h-5 text-primary" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="text-sm text-foreground">
+            {{ $t('admin.banner.restartMessage') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Download, Info } from 'lucide-vue-next'
+import { useAppSettingsStore } from '@/stores/appSettings'
+const appSettingsStore = useAppSettingsStore()
+</script>

frontend/src/components/button/CloseButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <Button
+    variant="ghost"
+    @click.stop="onClose"
+    size="xs"
+    class="text-gray-400 dark:text-gray-500 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 w-6 h-6 p-0"
+  >
+    <slot>
+      <X size="16" />
+    </slot>
+  </Button>
+</template>
+
+<script setup>
+import { Button } from '@/components/ui/button'
+import { X } from 'lucide-vue-next'
+
+defineProps({
+  onClose: {
+    type: Function,
+    required: true
+  }
+})
+</script>

frontend/src/components/combobox/SelectCombobox.vue

@@ -0,0 +1,61 @@
+<template>
+  <ComboBox
+    :model-value="normalizedValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    :items="items"
+    :placeholder="placeholder"
+  >
+    <!-- Items -->
+    <template #item="{ item }">
+      <div class="flex items-center gap-2">
+        <!--USER -->
+        <Avatar v-if="type === 'user'" class="w-7 h-7">
+          <AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
+          <AvatarFallback>{{ item.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
+        </Avatar>
+
+        <!-- Others -->
+        <span v-else-if="item.emoji">{{ item.emoji }}</span>
+        <span>{{ item.label }}</span>
+      </div>
+    </template>
+
+    <!-- Selected -->
+    <template #selected="{ selected }">
+      <div class="flex items-center gap-2">
+        <div v-if="selected" class="flex items-center gap-2">
+          <!--USER -->
+          <Avatar v-if="type === 'user'" class="w-7 h-7">
+            <AvatarImage :src="selected.avatar_url || ''" :alt="selected.label.slice(0, 2)" />
+            <AvatarFallback>{{ selected.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
+          </Avatar>
+
+          <!-- Others -->
+          <span v-else-if="selected.emoji">{{ selected.emoji }}</span>
+          <span>{{ selected.label }}</span>
+        </div>
+        <span v-else>{{ placeholder }}</span>
+      </div>
+    </template>
+  </ComboBox>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
+import ComboBox from '@/components/ui/combobox/ComboBox.vue'
+
+const props = defineProps({
+  modelValue: [String, Number, Object],
+  placeholder: String,
+  items: Array,
+  type: {
+    type: String
+  }
+})
+
+// Convert to str.
+const normalizedValue = computed(() => String(props.modelValue || ''))
+
+defineEmits(['update:modelValue'])
+</script>

frontend/src/components/datatable/DataTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <div class="rounded-md border shadow">
+    <div class="rounded border shadow">
       <Table>
         <TableHeader>
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">

frontend/src/components/editor/CodeEditor.vue

@@ -1,10 +1,13 @@
 <template>
-    <div ref="codeEditor" id="code-editor" class="code-editor" />
+    <div ref="codeEditor" @click="editorView?.focus()" class="w-full h-[28rem] border rounded-md" />
 </template>
 
 <script setup>
-import { ref, onMounted, watch, nextTick } from 'vue'
-import CodeFlask from 'codeflask'
+import { ref, onMounted, watch, nextTick, useTemplateRef } from 'vue'
+import { EditorView, basicSetup } from 'codemirror'
+import { html } from '@codemirror/lang-html'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { useColorMode } from '@vueuse/core'
 
 const props = defineProps({
     modelValue: { type: String, default: '' },
@@ -13,45 +16,38 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['update:modelValue'])
-const codeEditor = ref(null)
 const data = ref('')
-const flask = ref(null)
+let editorView = null 
+const codeEditor = useTemplateRef('codeEditor')
 
 const initCodeEditor = (body) => {
-    const el = document.createElement('code-flask')
-    el.attachShadow({ mode: 'open' })
-    el.shadowRoot.innerHTML = `
-      <style>
-        .codeflask .codeflask__flatten {
-          font-size: 15px;
-          white-space: pre-wrap;
-          word-break: break-word;
-        }
-        .codeflask .codeflask__lines { background: #fafafa; z-index: 10; }
-        .codeflask .token.tag { font-weight: bold; }
-        .codeflask .token.attr-name { color: #111; }
-        .codeflask .token.attr-value { color: #000 !important; }
-      </style>
-      <div id="area"></div>
-    `
-    codeEditor.value.appendChild(el)
+    const isDark = useColorMode().value === 'dark'
 
-    flask.value = new CodeFlask(el.shadowRoot.getElementById('area'), {
-        language: props.language,
-        lineNumbers: false,
-        styleParent: el.shadowRoot,
-        readonly: props.disabled
+    editorView = new EditorView({
+        doc: body,
+        extensions: [
+            basicSetup,
+            html(),
+            ...(isDark ? [oneDark] : []),
+            EditorView.editable.of(!props.disabled),
+            EditorView.theme({
+                '&': { height: '100%' },
+                '.cm-editor': { height: '100%' },
+                '.cm-scroller': { overflow: 'auto' }
+            }),
+            EditorView.updateListener.of((update) => {
+                if (!update.docChanged) return
+                const v = update.state.doc.toString()
+                emit('update:modelValue', v)
+                data.value = v
+                
+            })
+        ],
+        parent: codeEditor.value
     })
 
-    flask.value.onUpdate((v) => {
-        emit('update:modelValue', v)
-        data.value = v
-    })
-
-    flask.value.updateCode(body)
-
     nextTick(() => {
-        document.querySelector('code-flask').shadowRoot.querySelector('textarea').focus()
+        editorView?.focus()
     })
 }
 
@@ -61,7 +57,9 @@ onMounted(() => {
 
 watch(() => props.modelValue, (newVal) => {
     if (newVal !== data.value) {
-        flask.value.updateCode(newVal)
+        editorView?.dispatch({
+            changes: { from: 0, to: editorView.state.doc.length, insert: newVal }
+        })
     }
 })
 </script>

frontend/src/components/editor/TextEditor.vue

@@ -4,7 +4,7 @@
       :editor="editor"
       :tippy-options="{ duration: 100 }"
       v-if="editor"
-      class="bg-white p-1 box will-change-transform"
+      class="bg-background p-1 box will-change-transform"
     >
       <div class="flex space-x-1 items-center">
         <DropdownMenu v-if="aiPrompts.length > 0">
@@ -30,26 +30,24 @@
         <Button
           size="sm"
           variant="ghost"
-          @click.prevent="isBold = !isBold"
-          :active="isBold"
-          :class="{ 'bg-gray-200': isBold }"
+          @click.prevent="editor?.chain().focus().toggleBold().run()"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('bold') }"
         >
           <Bold size="14" />
         </Button>
         <Button
           size="sm"
           variant="ghost"
-          @click.prevent="isItalic = !isItalic"
-          :active="isItalic"
-          :class="{ 'bg-gray-200': isItalic }"
+          @click.prevent="editor?.chain().focus().toggleItalic().run()"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('italic') }"
         >
           <Italic size="14" />
         </Button>
         <Button
           size="sm"
           variant="ghost"
-          @click.prevent="toggleBulletList"
-          :class="{ 'bg-gray-200': editor?.isActive('bulletList') }"
+          @click.prevent="editor?.chain().focus().toggleBulletList().run()"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('bulletList') }"
         >
           <List size="14" />
         </Button>
@@ -57,8 +55,8 @@
         <Button
           size="sm"
           variant="ghost"
-          @click.prevent="toggleOrderedList"
-          :class="{ 'bg-gray-200': editor?.isActive('orderedList') }"
+          @click.prevent="editor?.chain().focus().toggleOrderedList().run()"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('orderedList') }"
         >
           <ListOrdered size="14" />
         </Button>
@@ -66,16 +64,16 @@
           size="sm"
           variant="ghost"
           @click.prevent="openLinkModal"
-          :class="{ 'bg-gray-200': editor?.isActive('link') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('link') }"
         >
           <LinkIcon size="14" />
         </Button>
-        <div v-if="showLinkInput" class="flex space-x-2 p-2 bg-white border rounded-lg">
-          <input
+        <div v-if="showLinkInput" class="flex space-x-2 p-2 bg-background border rounded">
+          <Input
             v-model="linkUrl"
             type="text"
             placeholder="Enter link URL"
-            class="border p-1 text-sm"
+            class="border p-1 text-sm w-[200px]"
           />
           <Button size="sm" @click="setLink">
             <Check size="14" />
@@ -91,7 +89,7 @@
 </template>
 
 <script setup>
-import { ref, watch, watchEffect, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3'
 import {
   ChevronDown,
@@ -111,6 +109,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
 import Placeholder from '@tiptap/extension-placeholder'
 import Image from '@tiptap/extension-image'
 import StarterKit from '@tiptap/starter-kit'
@@ -120,21 +119,18 @@ import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
 
-const selectedText = defineModel('selectedText', { default: '' })
-const textContent = defineModel('textContent')
-const htmlContent = defineModel('htmlContent')
-const isBold = defineModel('isBold')
-const isItalic = defineModel('isItalic')
-const cursorPosition = defineModel('cursorPosition', { default: 0 })
+const textContent = defineModel('textContent', { default: '' })
+const htmlContent = defineModel('htmlContent', { default: '' })
 const showLinkInput = ref(false)
 const linkUrl = ref('')
 
 const props = defineProps({
   placeholder: String,
-  contentToSet: String,
-  setInlineImage: Object,
   insertContent: String,
-  clearContent: Boolean,
+  autoFocus: {
+    type: Boolean,
+    default: true
+  },
   aiPrompts: {
     type: Array,
     default: () => []
@@ -145,8 +141,6 @@ const emit = defineEmits(['send', 'aiPromptSelected'])
 
 const emitPrompt = (key) => emit('aiPromptSelected', key)
 
-const getSelectionText = (from, to, doc) => doc.textBetween(from, to)
-
 // To preseve the table styling in emails, need to set the table style inline.
 // Created these custom extensions to set the table style inline.
 const CustomTable = Table.extend({
@@ -155,7 +149,7 @@ const CustomTable = Table.extend({
       ...this.parent?.(),
       style: {
         parseHTML: (element) =>
-          (element.getAttribute('style') || '') + ' border: 1px solid #dee2e6 !important; width: 100%; margin:0; table-layout: fixed; border-collapse: collapse; position:relative; border-radius: 0.25rem;'
+          (element.getAttribute('style') || '') + '; border: 1px solid #dee2e6 !important; width: 100%; margin:0; table-layout: fixed; border-collapse: collapse; position:relative; border-radius: 0.25rem;'
       }
     }
   }
@@ -168,7 +162,7 @@ const CustomTableCell = TableCell.extend({
       style: {
         parseHTML: (element) =>
           (element.getAttribute('style') || '') +
-          ' border: 1px solid #dee2e6 !important; box-sizing: border-box !important; min-width: 1em !important; padding: 6px 8px !important; vertical-align: top !important;'
+          '; border: 1px solid #dee2e6 !important; box-sizing: border-box !important; min-width: 1em !important; padding: 6px 8px !important; vertical-align: top !important;'
       }
     }
   }
@@ -181,26 +175,27 @@ const CustomTableHeader = TableHeader.extend({
       style: {
         parseHTML: (element) =>
           (element.getAttribute('style') || '') +
-          ' background-color: #f8f9fa !important; color: #212529 !important; font-weight: bold !important; text-align: left !important; border: 1px solid #dee2e6 !important; padding: 6px 8px !important;'
+          '; background-color: #f8f9fa !important; color: #212529 !important; font-weight: bold !important; text-align: left !important; border: 1px solid #dee2e6 !important; padding: 6px 8px !important;'
       }
     }
   }
 })
 
-const editorConfig = {
+const isInternalUpdate = ref(false)
+
+const editor = useEditor({
   extensions: [
     StarterKit.configure(),
     Image.configure({ HTMLAttributes: { class: 'inline-image' } }),
     Placeholder.configure({ placeholder: () => props.placeholder }),
     Link,
-    CustomTable.configure({
-      resizable: false
-    }),
+    CustomTable.configure({ resizable: false }),
     TableRow,
     CustomTableCell,
     CustomTableHeader
   ],
-  autofocus: true,
+  autofocus: props.autoFocus,
+  content: htmlContent.value,
   editorProps: {
     attributes: { class: 'outline-none' },
     handleKeyDown: (view, event) => {
@@ -208,110 +203,30 @@ const editorConfig = {
         emit('send')
         return true
       }
-      if (event.ctrlKey && event.key.toLowerCase() === 'b') {
-         // Prevent outer listeners
-        event.stopPropagation()
-        return false
-      }
     }
-  }
-}
-
-const editor = ref(
-  useEditor({
-    ...editorConfig,
-    content: htmlContent.value,
-    onSelectionUpdate: ({ editor }) => {
-      const { from, to } = editor.state.selection
-      selectedText.value = getSelectionText(from, to, editor.state.doc)
-    },
-    onUpdate: ({ editor }) => {
-      htmlContent.value = editor.getHTML()
-      textContent.value = editor.getText()
-      cursorPosition.value = editor.state.selection.from
-    },
-    onCreate: ({ editor }) => {
-      if (cursorPosition.value) {
-        editor.commands.setTextSelection(cursorPosition.value)
-      }
-    }
-  })
-)
-
-watchEffect(() => {
-  const editorInstance = editor.value
-  if (!editorInstance) return
-  isBold.value = editorInstance.isActive('bold')
-  isItalic.value = editorInstance.isActive('italic')
-})
-
-watchEffect(() => {
-  const editorInstance = editor.value
-  if (!editorInstance) return
-
-  if (isBold.value !== editorInstance.isActive('bold')) {
-    isBold.value
-      ? editorInstance.chain().focus().setBold().run()
-      : editorInstance.chain().focus().unsetBold().run()
-  }
-  if (isItalic.value !== editorInstance.isActive('italic')) {
-    isItalic.value
-      ? editorInstance.chain().focus().setItalic().run()
-      : editorInstance.chain().focus().unsetItalic().run()
+  },
+  // To update state when user types.
+  onUpdate: ({ editor }) => {
+    isInternalUpdate.value = true
+    htmlContent.value = editor.getHTML()
+    textContent.value = editor.getText()
+    isInternalUpdate.value = false
   }
 })
 
 watch(
-  () => props.contentToSet,
-  (newContentData) => {
-    if (!newContentData) return
-    try {
-      const parsedData = JSON.parse(newContentData)
-      const content = parsedData.content
-      if (content === '') {
-        editor.value?.commands.clearContent()
-      } else {
-        editor.value?.commands.setContent(content, true)
-      }
-      editor.value?.commands.focus()
-    } catch (e) {
-      console.error('Error parsing content data', e)
+  htmlContent,
+  (newContent) => {
+    if (!isInternalUpdate.value && editor.value && newContent !== editor.value.getHTML()) {
+      editor.value.commands.setContent(newContent || '', false)
+      textContent.value = editor.value.getText()
+      editor.value.commands.focus()
     }
-  }
-)
-
-watch(cursorPosition, (newPos, oldPos) => {
-  if (editor.value && newPos !== oldPos && newPos !== editor.value.state.selection.from) {
-    editor.value.commands.setTextSelection(newPos)
-  }
-})
-
-watch(
-  () => props.clearContent,
-  () => {
-    if (!props.clearContent) return
-    editor.value?.commands.clearContent()
-    editor.value?.commands.focus()
-    // `onUpdate` is not called when clearing content, so need to reset the content here.
-    htmlContent.value = ''
-    textContent.value = ''
-    cursorPosition.value = 0
-  }
-)
-
-watch(
-  () => props.setInlineImage,
-  (val) => {
-    if (val) {
-      editor.value?.commands.setImage({
-        src: val.src,
-        alt: val.alt,
-        title: val.title
-      })
-    }
-  }
+  },
+  { immediate: true }
 )
 
+// Insert content at cursor position when insertContent prop changes.
 watch(
   () => props.insertContent,
   (val) => {
@@ -323,18 +238,6 @@ onUnmounted(() => {
   editor.value?.destroy()
 })
 
-const toggleBulletList = () => {
-  if (editor.value) {
-    editor.value.chain().focus().toggleBulletList().run()
-  }
-}
-
-const toggleOrderedList = () => {
-  if (editor.value) {
-    editor.value.chain().focus().toggleOrderedList().run()
-  }
-}
-
 const openLinkModal = () => {
   if (editor.value?.isActive('link')) {
     linkUrl.value = editor.value.getAttributes('link').href

frontend/src/components/filter/FilterBuilder.vue

@@ -11,8 +11,12 @@
         <!-- Field -->
         <div class="flex-1">
           <Select v-model="modelFilter.field">
-            <SelectTrigger class="bg-transparent hover:bg-slate-100 w-full">
-              <SelectValue :placeholder="t('form.field.selectField')" />
+            <SelectTrigger>
+              <SelectValue
+                :placeholder="
+                  t('globals.messages.select', { name: t('globals.terms.field').toLowerCase() })
+                "
+              />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
@@ -27,8 +31,12 @@
         <!-- Operator -->
         <div class="flex-1">
           <Select v-model="modelFilter.operator" v-if="modelFilter.field">
-            <SelectTrigger class="bg-transparent hover:bg-slate-100 w-full">
-              <SelectValue :placeholder="t('form.field.selectOperator')" />
+            <SelectTrigger>
+              <SelectValue
+                :placeholder="
+                  t('globals.messages.select', { name: t('globals.terms.operator').toLowerCase() })
+                "
+              />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
@@ -44,83 +52,58 @@
         <div class="flex-1">
           <div v-if="modelFilter.field && modelFilter.operator">
             <template v-if="modelFilter.operator !== 'set' && modelFilter.operator !== 'not set'">
-              <ComboBox
-                v-if="getFieldOptions(modelFilter).length > 0"
+              <SelectTag
+                v-if="getFieldType(modelFilter) === FIELD_TYPE.MULTI_SELECT"
                 v-model="modelFilter.value"
                 :items="getFieldOptions(modelFilter)"
-                :placeholder="t('form.field.select')"
-              >
-                <template #item="{ item }">
-                  <div v-if="modelFilter.field === 'assigned_user_id'">
-                    <div class="flex items-center gap-1">
-                      <Avatar class="w-6 h-6">
-                        <AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
-                        <AvatarFallback>{{ item.label.slice(0, 2).toUpperCase() }} </AvatarFallback>
-                      </Avatar>
-                      <span>{{ item.label }}</span>
-                    </div>
-                  </div>
-                  <div v-else-if="modelFilter.field === 'assigned_team_id'">
-                    <div class="flex items-center gap-2 ml-2">
-                      <span>{{ item.emoji }}</span>
-                      <span>{{ item.label }}</span>
-                    </div>
-                  </div>
-                  <div v-else>
-                    {{ item.label }}
-                  </div>
-                </template>
+                :placeholder="t('globals.messages.select', { name: t('globals.terms.tag', 2) })"
+              />
+
+              <SelectComboBox
+                v-else-if="
+                  getFieldOptions(modelFilter).length > 0 &&
+                  modelFilter.field === 'assigned_user_id'
+                "
+                v-model="modelFilter.value"
+                :items="getFieldOptions(modelFilter)"
+                :placeholder="t('globals.messages.select', { name: '' })"
+                type="user"
+              />
+
+              <SelectComboBox
+                v-else-if="
+                  getFieldOptions(modelFilter).length > 0 &&
+                  modelFilter.field === 'assigned_team_id'
+                "
+                v-model="modelFilter.value"
+                :items="getFieldOptions(modelFilter)"
+                :placeholder="t('globals.messages.select', { name: '' })"
+                type="team"
+              />
+
+              <SelectComboBox
+                v-else-if="getFieldOptions(modelFilter).length > 0"
+                v-model="modelFilter.value"
+                :items="getFieldOptions(modelFilter)"
+                :placeholder="t('globals.messages.select', { name: '' })"
+              />
 
-                <template #selected="{ selected }">
-                  <div v-if="!selected">{{ $t('form.field.selectValue') }}</div>
-                  <div v-if="modelFilter.field === 'assigned_user_id'">
-                    <div class="flex items-center gap-2">
-                      <div v-if="selected" class="flex items-center gap-1">
-                        <Avatar class="w-6 h-6">
-                          <AvatarImage
-                            :src="selected.avatar_url || ''"
-                            :alt="selected.label.slice(0, 2)"
-                          />
-                          <AvatarFallback>{{
-                            selected.label.slice(0, 2).toUpperCase()
-                          }}</AvatarFallback>
-                        </Avatar>
-                        <span>{{ selected.label }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div v-else-if="modelFilter.field === 'assigned_team_id'">
-                    <div class="flex items-center gap-2">
-                      <span v-if="selected">
-                        {{ selected.emoji }}
-                        <span>{{ selected.label }}</span>
-                      </span>
-                    </div>
-                  </div>
-                  <div v-else-if="selected">
-                    {{ selected.label }}
-                  </div>
-                </template>
-              </ComboBox>
               <Input
                 v-else
                 v-model="modelFilter.value"
-                class="bg-transparent hover:bg-slate-100"
-                :placeholder="t('form.field.value')"
+                :placeholder="t('globals.terms.value')"
                 type="text"
               />
             </template>
           </div>
         </div>
       </div>
-
-      <button @click="removeFilter(index)" class="p-1 hover:bg-slate-100 rounded">
-        <X class="w-4 h-4 text-slate-500" />
-      </button>
+      <CloseButton :onClose="() => removeFilter(index)" />
     </div>
 
+    <!-- Button Container -->
     <div class="flex items-center justify-between pt-3">
-      <Button variant="ghost" size="sm" @click="addFilter" class="text-slate-600">
+      <Button variant="ghost" size="sm" @click.stop="addFilter" class="text-slate-600">
         <Plus class="w-3 h-3 mr-1" />
         {{
           $t('globals.messages.add', {
@@ -129,15 +112,17 @@
         }}
       </Button>
       <div class="flex gap-2" v-if="showButtons">
-        <Button variant="ghost" @click="clearFilters">{{ $t('globals.buttons.reset') }}</Button>
-        <Button @click="applyFilters">{{ $t('globals.buttons.apply') }}</Button>
+        <Button variant="ghost" @click.stop="clearFilters">
+          {{ $t('globals.messages.reset') }}
+        </Button>
+        <Button @click.stop="applyFilters">{{ $t('globals.messages.apply') }}</Button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 import {
   Select,
   SelectContent,
@@ -146,12 +131,14 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
-import { Plus, X } from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import { useI18n } from 'vue-i18n'
-import ComboBox from '@/components/ui/combobox/ComboBox.vue'
+import { FIELD_TYPE } from '@/constants/filterConfig'
+import CloseButton from '@/components/button/CloseButton.vue'
+import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
+import SelectTag from '@/components/ui/select/SelectTag.vue'
 
 const props = defineProps({
   fields: {
@@ -175,12 +162,17 @@ onMounted(() => {
   }
 })
 
+onUnmounted(() => {
+  // On unmounted set valid filters
+  modelValue.value = validFilters.value
+})
+
 const getModel = (field) => {
   const fieldConfig = props.fields.find((f) => f.field === field)
   return fieldConfig?.model || ''
 }
 
-// Set model for each filter
+// Set model for each filter and the default value
 watch(
   () => modelValue.value,
   (filters) => {
@@ -188,6 +180,15 @@ watch(
       if (filter.field && !filter.model) {
         filter.model = getModel(filter.field)
       }
+
+      // Multi select need arrays as their default value
+      if (
+        filter.field &&
+        getFieldType(filter) === FIELD_TYPE.MULTI_SELECT &&
+        !Array.isArray(filter.value)
+      ) {
+        filter.value = []
+      }
     })
   },
   { deep: true }
@@ -195,15 +196,20 @@ watch(
 
 // Reset operator and value when field changes for a filter at a given index
 watch(
-  () => modelValue.value.map((f) => f.field),
-  (newFields, oldFields) => {
-    newFields.forEach((field, index) => {
-      if (field !== oldFields[index]) {
-        modelValue.value[index].operator = ''
-        modelValue.value[index].value = ''
+  modelValue,
+  (newFilters, oldFilters) => {
+    // Skip first run
+    if (!oldFilters) return
+
+    newFilters.forEach((filter, index) => {
+      const oldFilter = oldFilters[index]
+      if (oldFilter && filter.field !== oldFilter.field) {
+        filter.operator = ''
+        filter.value = ''
       }
     })
-  }
+  },
+  { deep: true }
 )
 
 const addFilter = () => {
@@ -222,7 +228,17 @@ const clearFilters = () => {
 }
 
 const validFilters = computed(() => {
-  return modelValue.value.filter((filter) => filter.field && filter.operator && filter.value)
+  return modelValue.value.filter((filter) => {
+    // For multi-select field type, allow empty array as a valid value
+    const field = props.fields.find((f) => f.field === filter.field)
+    const isMultiSelectField = field?.type === FIELD_TYPE.MULTI_SELECT
+
+    if (isMultiSelectField) {
+      return filter.field && filter.operator && filter.value !== undefined && filter.value !== null
+    }
+
+    return filter.field && filter.operator && filter.value
+  })
 })
 
 const getFieldOptions = (fieldValue) => {
@@ -234,4 +250,9 @@ const getFieldOperators = (modelFilter) => {
   const field = props.fields.find((f) => f.field === modelFilter.field)
   return field?.operators || []
 }
+
+const getFieldType = (modelFilter) => {
+  const field = props.fields.find((f) => f.field === modelFilter.field)
+  return field?.type || ''
+}
 </script>

frontend/src/components/layout/MenuCard.vue

@@ -1,17 +1,17 @@
 <template>
   <div
-    class="flex flex-col p-4 border rounded-lg shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
+    class="flex flex-col p-4 border rounded shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
     @click="handleClick">
     <div class="flex items-center mb-2">
       <component :is="icon" size="24" class="mr-2 text-primary" />
-      <h3 class="text-lg font-medium text-gray-800">{{ title }}</h3>
+      <h3 class="text-lg font-medium">{{ title }}</h3>
     </div>
-    <p class="text-sm text-gray-600">{{ subTitle }}</p>
+    <p class="text-sm text-gray-600 dark:text-gray-400">{{ subTitle }}</p>
   </div>
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue'
+import { defineEmits } from 'vue'
 
 const props = defineProps({
   title: String,

frontend/src/components/layout/PageHeader.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="!isHidden">
     <div class="flex items-center space-x-4 h-12 px-2">
-      <SidebarTrigger class="cursor-pointer w-4 h-4" />
-      <span class="text-xl font-semibold text-gray-800">
+      <SidebarTrigger class="cursor-pointer" />
+      <span class="text-xl font-semibold">
         {{ title }}
       </span>
     </div>

frontend/src/components/sidebar/Sidebar.vue

@@ -5,7 +5,7 @@ import {
   accountNavItems,
   contactNavItems
 } from '@/constants/navigation'
-import { RouterLink, useRoute } from 'vue-router'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import {
   Sidebar,
@@ -14,7 +14,6 @@ import {
   SidebarHeader,
   SidebarInset,
   SidebarMenu,
-  SidebarSeparator,
   SidebarMenuAction,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -28,10 +27,10 @@ import {
   ChevronRight,
   EllipsisVertical,
   User,
-  UserSearch,
-  UsersRound,
   Search,
-  Plus
+  Plus,
+  CircleDashed,
+  List
 } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -39,38 +38,35 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { filterNavItems } from '@/utils/nav-permissions'
 import { useStorage } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
+import { useConversationStore } from '@/stores/conversation'
 
 defineProps({
   userTeams: { type: Array, default: () => [] },
   userViews: { type: Array, default: () => [] }
 })
 const userStore = useUserStore()
+const conversationStore = useConversationStore()
 const settingsStore = useAppSettingsStore()
 const route = useRoute()
+const router = useRouter()
 const { t } = useI18n()
 const emit = defineEmits(['createView', 'editView', 'deleteView', 'createConversation'])
 
-const openCreateViewDialog = () => {
-  emit('createView')
-}
-
-const editView = (view) => {
-  emit('editView', view)
-}
-
-const deleteView = (view) => {
-  emit('deleteView', view)
-}
-
-const filteredAdminNavItems = computed(() => filterNavItems(adminNavItems, userStore.can))
-const filteredReportsNavItems = computed(() => filterNavItems(reportsNavItems, userStore.can))
-const filteredContactsNavItems = computed(() => filterNavItems(contactNavItems, userStore.can))
-
 const isActiveParent = (parentHref) => {
   return route.path.startsWith(parentHref)
 }
@@ -79,9 +75,114 @@ const isInboxRoute = (path) => {
   return path.startsWith('/inboxes')
 }
 
+const openCreateViewDialog = () => {
+  emit('createView')
+}
+
+const editView = (view) => {
+  emit('editView', view)
+}
+
+const openDeleteConfirmation = (view) => {
+  viewToDelete.value = view
+  isDeleteOpen.value = true
+}
+
+const handleDeleteView = () => {
+  if (viewToDelete.value) {
+    emit('deleteView', viewToDelete.value)
+    isDeleteOpen.value = false
+    viewToDelete.value = null
+  }
+}
+
+// Navigation methods with conversation retention
+const navigateToInbox = (type) => {
+  if (conversationStore.hasConversationOpen && conversationStore.conversation.data?.uuid) {
+    router.push({
+      name: 'inbox-conversation',
+      params: {
+        type,
+        uuid: conversationStore.conversation.data.uuid
+      }
+    })
+  } else {
+    router.push({
+      name: 'inbox',
+      params: { type }
+    })
+  }
+}
+
+const navigateToTeamInbox = (teamID) => {
+  if (conversationStore.hasConversationOpen && conversationStore.conversation.data?.uuid) {
+    router.push({
+      name: 'team-inbox-conversation',
+      params: {
+        teamID,
+        uuid: conversationStore.conversation.data.uuid
+      }
+    })
+  } else {
+    router.push({
+      name: 'team-inbox',
+      params: { teamID }
+    })
+  }
+}
+
+const navigateToViewInbox = (viewID) => {
+  if (conversationStore.hasConversationOpen && conversationStore.conversation.data?.uuid) {
+    router.push({
+      name: 'view-inbox-conversation',
+      params: {
+        viewID,
+        uuid: conversationStore.conversation.data.uuid
+      }
+    })
+  } else {
+    router.push({
+      name: 'view-inbox',
+      params: { viewID }
+    })
+  }
+}
+
+const filteredAdminNavItems = computed(() => filterNavItems(adminNavItems, userStore.can))
+const filteredReportsNavItems = computed(() => filterNavItems(reportsNavItems, userStore.can))
+const filteredContactsNavItems = computed(() => filterNavItems(contactNavItems, userStore.can))
+
+// For auto opening admin collapsibles when a child route is active
+const openAdminCollapsible = ref(null)
+const toggleAdminCollapsible = (titleKey) => {
+  openAdminCollapsible.value = openAdminCollapsible.value === titleKey ? null : titleKey
+}
+// Watch for route changes and update the active collapsible
+watch(
+  [() => route.path, filteredAdminNavItems],
+  () => {
+    const activeItem = filteredAdminNavItems.value.find((item) => {
+      if (!item.children) return isActiveParent(item.href)
+      return item.children.some((child) => isActiveParent(child.href))
+    })
+    if (activeItem) {
+      openAdminCollapsible.value = activeItem.titleKey
+    }
+  },
+  { immediate: true }
+)
+
+// Sidebar open state in local storage
 const sidebarOpen = useStorage('mainSidebarOpen', true)
 const teamInboxOpen = useStorage('teamInboxOpen', true)
 const viewInboxOpen = useStorage('viewInboxOpen', true)
+
+// Track which view is being hovered for ellipsis menu visibility
+const hoveredViewId = ref(null)
+
+// Track delete confirmation dialog state
+const isDeleteOpen = ref(false)
+const viewToDelete = ref(null)
 </script>
 
 <template>
@@ -98,24 +199,25 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/contacts')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('globals.terms.contact', 2) }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div class="px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.contact', 2) }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
               <SidebarMenuItem v-for="item in filteredContactsNavItems" :key="item.titleKey">
                 <SidebarMenuButton :isActive="isActiveParent(item.href)" asChild>
                   <router-link :to="item.href">
-                    <span>{{ t(item.titleKey) }}</span>
+                    <span>{{
+                      t('globals.messages.all', {
+                        name: t(item.titleKey, 2).toLowerCase()
+                      })
+                    }}</span>
                   </router-link>
                 </SidebarMenuButton>
               </SidebarMenuItem>
@@ -137,17 +239,14 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/reports/overview')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.reports') }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div class="px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.report', 2) }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -171,21 +270,18 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/admin')" asChild>
-                <div class="flex items-center justify-between w-full">
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.admin') }}
-                  </span>
-                </div>
+              <div class="flex flex-col items-start justify-between w-full px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.admin') }}
+                </span>
                 <!-- App version -->
-                <div class="text-xs text-muted-foreground ml-2">
+                <div class="text-xs text-muted-foreground">
                   ({{ settingsStore.settings['app.version'] }})
                 </div>
-              </SidebarMenuButton>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -203,11 +299,12 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
                 <Collapsible
                   v-else
                   class="group/collapsible"
-                  :default-open="isActiveParent(item.href)"
+                  :open="openAdminCollapsible === item.titleKey"
+                  @update:open="toggleAdminCollapsible(item.titleKey)"
                 >
                   <CollapsibleTrigger as-child>
                     <SidebarMenuButton :isActive="isActiveParent(item.href)">
-                      <span>{{ t(item.titleKey) }}</span>
+                      <span>{{ t(item.titleKey, item.isTitleKeyPlural === true ? 2 : 1) }}</span>
                       <ChevronRight
                         class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
                       />
@@ -239,17 +336,14 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/account/profile')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.account') }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div class="px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.account') }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -276,28 +370,20 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <div class="flex items-center justify-between w-full">
-                  <div class="font-semibold text-xl">
-                    <span>{{ t('navigation.inbox') }}</span>
-                  </div>
-                  <div class="ml-auto">
-                    <div class="flex items-center space-x-2">
-                      <router-link :to="{ name: 'search' }">
-                        <button
-                          class="flex items-center bg-accent p-2 rounded-full hover:scale-110 transition-transform duration-100"
-                        >
-                          <Search size="15" stroke-width="2.5" />
-                        </button>
-                      </router-link>
-                    </div>
-                  </div>
+              <div class="flex items-center justify-between w-full px-1">
+                <div class="font-semibold text-xl">
+                  <span>{{ t('globals.terms.inbox') }}</span>
                 </div>
-              </SidebarMenuButton>
+                <div class="mr-1 mt-1 hover:scale-110 transition-transform">
+                  <router-link :to="{ name: 'search' }">
+                    <Search size="18" stroke-width="2.5" />
+                  </router-link>
+                </div>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
+
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -317,32 +403,32 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
               </SidebarMenuItem>
               <SidebarMenuItem>
                 <SidebarMenuButton asChild :isActive="isActiveParent('/inboxes/assigned')">
-                  <router-link :to="{ name: 'inbox', params: { type: 'assigned' } }">
+                  <a href="#" @click.prevent="navigateToInbox('assigned')">
                     <User />
-                    <span>{{ t('navigation.myInbox') }}</span>
-                  </router-link>
+                    <span>{{ t('globals.terms.myInbox') }}</span>
+                  </a>
                 </SidebarMenuButton>
               </SidebarMenuItem>
 
               <SidebarMenuItem>
                 <SidebarMenuButton asChild :isActive="isActiveParent('/inboxes/unassigned')">
-                  <router-link :to="{ name: 'inbox', params: { type: 'unassigned' } }">
-                    <UserSearch />
+                  <a href="#" @click.prevent="navigateToInbox('unassigned')">
+                    <CircleDashed />
                     <span>
-                      {{ t('navigation.unassigned') }}
+                      {{ t('globals.terms.unassigned') }}
                     </span>
-                  </router-link>
+                  </a>
                 </SidebarMenuButton>
               </SidebarMenuItem>
 
               <SidebarMenuItem>
                 <SidebarMenuButton asChild :isActive="isActiveParent('/inboxes/all')">
-                  <router-link :to="{ name: 'inbox', params: { type: 'all' } }">
-                    <UsersRound />
+                  <a href="#" @click.prevent="navigateToInbox('all')">
+                    <List />
                     <span>
-                      {{ t('navigation.all') }}
+                      {{ t('globals.messages.all') }}
                     </span>
-                  </router-link>
+                  </a>
                 </SidebarMenuButton>
               </SidebarMenuItem>
 
@@ -359,7 +445,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
                       <router-link to="#">
                         <!-- <Users /> -->
                         <span>
-                          {{ t('navigation.teamInboxes') }}
+                          {{ t('globals.terms.teamInbox', 2) }}
                         </span>
                         <ChevronRight
                           class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
@@ -375,9 +461,9 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
                           :is-active="route.params.teamID == team.id"
                           asChild
                         >
-                          <router-link :to="{ name: 'team-inbox', params: { teamID: team.id } }">
+                          <a href="#" @click.prevent="navigateToTeamInbox(team.id)">
                             {{ team.emoji }}<span>{{ team.name }}</span>
-                          </router-link>
+                          </a>
                         </SidebarMenuButton>
                       </SidebarMenuSubItem>
                     </SidebarMenuSub>
@@ -388,18 +474,18 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
               <!-- Views -->
               <Collapsible class="group/collapsible" defaultOpen v-model:open="viewInboxOpen">
                 <SidebarMenuItem>
-                  <CollapsibleTrigger as-child>
+                  <CollapsibleTrigger asChild>
                     <SidebarMenuButton asChild>
-                      <router-link to="#" class="group/item">
+                      <router-link to="#" class="group/item !p-2">
                         <!-- <SlidersHorizontal /> -->
                         <span>
-                          {{ t('navigation.views') }}
+                          {{ t('globals.terms.view', 2) }}
                         </span>
                         <div>
                           <Plus
                             size="18"
                             @click.stop="openCreateViewDialog"
-                            class="rounded-lg cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
+                            class="rounded cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
                           />
                         </div>
                         <ChevronRight
@@ -412,30 +498,41 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
 
                   <CollapsibleContent>
                     <SidebarMenuSub v-for="view in userViews" :key="view.id">
-                      <SidebarMenuSubItem>
+                      <SidebarMenuSubItem
+                        @mouseenter="hoveredViewId = view.id"
+                        @mouseleave="hoveredViewId = null"
+                      >
                         <SidebarMenuButton
                           size="sm"
                           :isActive="route.params.viewID == view.id"
                           asChild
                         >
-                          <router-link :to="{ name: 'view-inbox', params: { viewID: view.id } }">
-                            <span class="break-words w-32 truncate">{{ view.name }}</span>
-                            <SidebarMenuAction :showOnHover="true" class="mr-3">
+                          <a href="#" @click.prevent="navigateToViewInbox(view.id)">
+                            <span class="break-words w-32 truncate" :title="view.name">{{ view.name }}</span>
+                            <SidebarMenuAction
+                              @click.stop
+                              :class="[
+                                'mr-3',
+                                'md:opacity-0',
+                                'data-[state=open]:opacity-100',
+                                { 'md:opacity-100': hoveredViewId === view.id }
+                              ]"
+                            >
                               <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
+                                <DropdownMenuTrigger asChild @click.prevent>
                                   <EllipsisVertical />
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent>
                                   <DropdownMenuItem @click="() => editView(view)">
-                                    <span>{{ t('globals.buttons.edit') }}</span>
+                                    <span>{{ t('globals.messages.edit') }}</span>
                                   </DropdownMenuItem>
-                                  <DropdownMenuItem @click="() => deleteView(view)">
-                                    <span>{{ t('globals.buttons.delete') }}</span>
+                                  <DropdownMenuItem @click="() => openDeleteConfirmation(view)">
+                                    <span>{{ t('globals.messages.delete') }}</span>
                                   </DropdownMenuItem>
                                 </DropdownMenuContent>
                               </DropdownMenu>
                             </SidebarMenuAction>
-                          </router-link>
+                          </a>
                         </SidebarMenuButton>
                       </SidebarMenuSubItem>
                     </SidebarMenuSub>
@@ -453,4 +550,22 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
       <slot></slot>
     </SidebarInset>
   </SidebarProvider>
+
+  <!-- View Delete Confirmation Dialog -->
+  <AlertDialog v-model:open="isDeleteOpen">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ t('globals.messages.areYouAbsolutelySure') }}</AlertDialogTitle>
+        <AlertDialogDescription>
+          {{ t('globals.messages.deletionConfirmation', { name: t('globals.terms.view') }) }}
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>{{ t('globals.messages.cancel') }}</AlertDialogCancel>
+        <AlertDialogAction @click="handleDeleteView">
+          {{ t('globals.messages.delete') }}
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
 </template>

frontend/src/components/sidebar/SidebarNavUser.vue

@@ -2,12 +2,12 @@
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
       <SidebarMenuButton
-        size="lg"
-        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground p-0"
+        size="md"
+        class="p-0"
       >
-        <Avatar class="h-8 w-8 rounded-lg relative overflow-visible">
-          <AvatarImage :src="userStore.avatar" alt="" class="rounded-lg" />
-          <AvatarFallback class="rounded-lg">
+        <Avatar class="h-8 w-8 rounded relative overflow-visible">
+          <AvatarImage :src="userStore.avatar" alt="U" class="rounded" />
+          <AvatarFallback class="rounded">
             {{ userStore.getInitials }}
           </AvatarFallback>
           <div
@@ -30,51 +30,65 @@
       </SidebarMenuButton>
     </DropdownMenuTrigger>
     <DropdownMenuContent
-      class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+      class="w-[--radix-dropdown-menu-trigger-width] min-w-56"
       side="bottom"
       :side-offset="4"
     >
-      <DropdownMenuLabel class="p-0 font-normal space-y-1">
-        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-          <Avatar class="h-8 w-8 rounded-lg">
+      <DropdownMenuLabel class="font-normal space-y-2 px-2">
+        <!-- User header -->
+        <div class="flex items-center gap-2 py-1.5 text-left text-sm">
+          <Avatar class="h-8 w-8 rounded">
             <AvatarImage :src="userStore.avatar" alt="U" />
-            <AvatarFallback class="rounded-lg">
+            <AvatarFallback class="rounded">
               {{ userStore.getInitials }}
             </AvatarFallback>
           </Avatar>
-          <div class="grid flex-1 text-left text-sm leading-tight">
+          <div class="flex-1 flex flex-col leading-tight">
             <span class="truncate font-semibold">{{ userStore.getFullName }}</span>
-            <span class="truncate text-xs">{{ userStore.email }}</span>
+            <span class="truncate text-xs text-muted-foreground">{{ userStore.email }}</span>
           </div>
         </div>
+
         <div class="space-y-2">
-          <!-- Away switch is checked with 'away_manual' or 'away_and_reassigning' -->
-          <div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
-            <span class="text-muted-foreground">{{ t('navigation.away') }}</span>
+          <!-- Dark-mode toggle -->
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <Moon v-if="mode === 'dark'" size="16" class="text-muted-foreground" />
+              <Sun v-else size="16" class="text-muted-foreground" />
+              <span class="text-muted-foreground">{{ t('navigation.darkMode') }}</span>
+            </div>
             <Switch
-              :checked="
-                ['away_manual', 'away_and_reassigning'].includes(userStore.user.availability_status)
-              "
-              @update:checked="
-                (val) => {
-                  const newStatus = val ? 'away_manual' : 'online'
-                  userStore.updateUserAvailability(newStatus)
-                }
-              "
+              :checked="mode === 'dark'"
+              @update:checked="(val) => (mode = val ? 'dark' : 'light')"
             />
           </div>
-          <!-- Reassign Replies Switch is checked with 'away_and_reassigning' -->
-          <div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
-            <span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
-            <Switch
-              :checked="userStore.user.availability_status === 'away_and_reassigning'"
-              @update:checked="
-                (val) => {
-                  const newStatus = val ? 'away_and_reassigning' : 'away_manual'
-                  userStore.updateUserAvailability(newStatus)
-                }
-              "
-            />
+
+          <div class="border-t border-gray-200 dark:border-gray-700 pt-3 space-y-3">
+            <!-- Away toggle -->
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-muted-foreground">{{ t('navigation.away') }}</span>
+              <Switch
+                :checked="
+                  ['away_manual', 'away_and_reassigning'].includes(
+                    userStore.user.availability_status
+                  )
+                "
+                @update:checked="
+                  (val) => userStore.updateUserAvailability(val ? 'away_manual' : 'online')
+                "
+              />
+            </div>
+            <!-- Reassign toggle -->
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
+              <Switch
+                :checked="userStore.user.availability_status === 'away_and_reassigning'"
+                @update:checked="
+                  (val) =>
+                    userStore.updateUserAvailability(val ? 'away_and_reassigning' : 'away_manual')
+                "
+              />
+            </div>
           </div>
         </div>
       </DropdownMenuLabel>
@@ -82,7 +96,7 @@
       <DropdownMenuGroup>
         <DropdownMenuItem @click.prevent="router.push({ name: 'account' })">
           <CircleUserRound size="18" class="mr-2" />
-          {{ t('navigation.account') }}
+          {{ t('globals.terms.account') }}
         </DropdownMenuItem>
       </DropdownMenuGroup>
       <DropdownMenuSeparator />
@@ -108,10 +122,13 @@ import {
 import { SidebarMenuButton } from '@/components/ui/sidebar'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Switch } from '@/components/ui/switch'
-import { ChevronsUpDown, CircleUserRound, LogOut } from 'lucide-vue-next'
+import { ChevronsUpDown, CircleUserRound, LogOut, Moon, Sun } from 'lucide-vue-next'
 import { useUserStore } from '@/stores/user'
 import { useRouter } from 'vue-router'
 
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode()
 const userStore = useUserStore()
 const router = useRouter()
 const { t } = useI18n()

frontend/src/components/table/SimpleTable.vue

@@ -1,24 +1,41 @@
 <template>
-  <table class="min-w-full table-fixed divide-y divide-gray-200">
-    <thead class="bg-gray-50">
+  <table class="min-w-full table-fixed divide-y divide-border">
+    <thead class="bg-muted">
       <tr>
         <th
           v-for="(header, index) in headers"
           :key="index"
           scope="col"
-          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+          class="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider"
         >
           {{ header }}
         </th>
-        <th scope="col" class="relative px-6 py-3"></th>
+        <th v-if="showDelete" scope="col" class="relative px-6 py-3"></th>
       </tr>
     </thead>
-    <tbody class="bg-white divide-y divide-gray-200">
-      <template v-if="data.length === 0">
+    <tbody class="bg-background divide-y divide-border">
+      <!-- Loading State -->
+      <template v-if="loading">
+        <tr v-for="i in skeletonRows" :key="`skeleton-${i}`" class="hover:bg-accent">
+          <td
+            v-for="(header, index) in headers"
+            :key="`skeleton-cell-${index}`"
+            class="px-6 py-3 text-sm font-medium text-foreground whitespace-normal break-words"
+          >
+            <Skeleton class="h-4 w-[85%]" />
+          </td>
+          <td v-if="showDelete" class="px-6 py-4 text-sm text-muted-foreground">
+            <Skeleton class="h-8 w-8 rounded" />
+          </td>
+        </tr>
+      </template>
+
+      <!-- No Results State -->
+      <template v-else-if="data.length === 0">
         <tr>
-          <td :colspan="headers.length + 1" class="px-6 py-12 text-center">
+          <td :colspan="headers.length + (showDelete ? 1 : 0)" class="px-6 py-12 text-center">
             <div class="flex flex-col items-center space-y-4">
-              <span class="text-md text-gray-500">
+              <span class="text-md text-muted-foreground">
                 {{
                   $t('globals.messages.noResults', {
                     name: $t('globals.terms.result', 2).toLowerCase()
@@ -29,16 +46,18 @@
           </td>
         </tr>
       </template>
+
+      <!-- Data Rows -->
       <template v-else>
-        <tr v-for="(item, index) in data" :key="index">
+        <tr v-for="(item, index) in data" :key="index" class="hover:bg-accent">
           <td
             v-for="key in keys"
             :key="key"
-            class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-normal break-words"
+            class="px-6 py-4 text-sm font-medium text-foreground whitespace-normal break-words"
           >
             {{ item[key] }}
           </td>
-          <td class="px-6 py-4 text-sm text-gray-500" v-if="showDelete">
+          <td v-if="showDelete" class="px-6 py-4 text-sm text-muted-foreground">
             <Button size="xs" variant="ghost" @click.prevent="deleteItem(item)">
               <Trash2 class="h-4 w-4" />
             </Button>
@@ -51,8 +70,9 @@
 
 <script setup>
 import { Trash2 } from 'lucide-vue-next'
-import { defineProps, defineEmits } from 'vue'
+import { defineEmits } from 'vue'
 import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
 
 defineProps({
   headers: {
@@ -73,6 +93,14 @@ defineProps({
   showDelete: {
     type: Boolean,
     default: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  skeletonRows: {
+    type: Number,
+    default: 5
   }
 })
 

frontend/src/components/ui/avatar/AvatarUpload.vue

@@ -14,7 +14,7 @@
 
     <!-- Delete Icon -->
     <X
-      class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
+      class="absolute top-1 right-1 rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
       size="20"
       @click.stop="emit('remove')"
       v-if="src"

frontend/src/components/ui/button/Button.vue

@@ -1,25 +1,16 @@
 <script setup>
-import { Primitive } from 'radix-vue'
-import { buttonVariants } from '.'
+import { Primitive } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ref, computed } from 'vue'
-import { DotLoader } from '@/components/ui/loader'
-
+import { buttonVariants } from '.'
+import { Loader2 } from 'lucide-vue-next'
 const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   class: { type: null, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false, default: 'button' },
-  isLoading: { type: Boolean, required: false, default: false }
-})
-
-const isDisabled = ref(false)
-
-const computedClass = computed(() => {
-  return cn(buttonVariants({ variant: props.variant, size: props.size }), props.class, {
-    'cursor-not-allowed opacity-50': props.isLoading || isDisabled.value
-  })
+  isLoading: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false }
 })
 </script>
 
@@ -27,10 +18,22 @@ const computedClass = computed(() => {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="computedClass"
-    :disabled="isLoading || isDisabled"
+    :class="
+      cn(
+        buttonVariants({ variant, size }),
+        'relative',
+        { 'text-transparent': isLoading },
+        props.class
+      )
+    "
+    :disabled="isLoading || disabled"
   >
-    <DotLoader v-if="isLoading" />
-    <slot v-else />
+    <slot />
+    <span
+      v-if="isLoading"
+      class="absolute inset-0 flex items-center justify-center pointer-events-none text-background"
+    >
+      <Loader2 class="h-5 w-5 animate-spin" />
+    </span>
   </Primitive>
 </template>

frontend/src/components/ui/button/index.js

@@ -1,31 +1,34 @@
-import { cva } from 'class-variance-authority'
+import { cva } from 'class-variance-authority';
 
-export { default as Button } from './Button.vue'
+export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
           'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9'
-      }
+        icon: 'h-9 w-9',
+      },
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default'
-    }
-  }
-)
+      size: 'default',
+    },
+  },
+);

frontend/src/components/ui/combobox/ComboBox.vue

@@ -8,7 +8,7 @@
         :class="['w-full justify-between', buttonClass]"
       >
         <slot name="selected" :selected="selectedItem">{{ selectedLabel }}</slot>
-        <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <CaretSortIcon class="h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
     <PopoverContent class="p-0">

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

@@ -0,0 +1,116 @@
+<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('globals.messages.lastNItems', {
+              n: 1,
+              name: t('globals.terms.day', 1).toLowerCase()
+            })
+          }}
+        </SelectItem>
+        <SelectItem value="2">
+          {{
+            $t('globals.messages.lastNItems', {
+              n: 2,
+              name: t('globals.terms.day', 2).toLowerCase()
+            })
+          }}
+        </SelectItem>
+        <SelectItem value="7">
+          {{
+            $t('globals.messages.lastNItems', {
+              n: 7,
+              name: t('globals.terms.day', 2).toLowerCase()
+            })
+          }}
+        </SelectItem>
+        <SelectItem value="30">
+          {{
+            $t('globals.messages.lastNItems', {
+              n: 30,
+              name: t('globals.terms.day', 2).toLowerCase()
+            })
+          }}
+        </SelectItem>
+        <SelectItem value="90">
+          {{
+            $t('globals.messages.lastNItems', {
+              n: 90,
+              name: t('globals.terms.day', 2).toLowerCase()
+            })
+          }}
+        </SelectItem>
+        <SelectItem value="custom">
+          {{
+            $t('globals.messages.custom', {
+              name: t('globals.terms.day', 2).toLowerCase()
+            })
+          }}
+        </SelectItem>
+      </SelectContent>
+    </Select>
+    <div v-if="selectedDays === 'custom'" class="flex items-center gap-2">
+      <Input
+        v-model="customDaysInput"
+        type="number"
+        min="1"
+        max="365"
+        class="w-20 h-8"
+        @blur="handleCustomDaysChange"
+        @keyup.enter="handleCustomDaysChange"
+      />
+    </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/components/ui/input/Input.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue']);
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
-  defaultValue: props.defaultValue
-})
+  defaultValue: props.defaultValue,
+});
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     :class="
       cn(
         'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        props.class
+        props.class,
       )
     "
   />

frontend/src/components/ui/input/index.js

@@ -1 +1 @@
-export { default as Input } from './Input.vue'
+export { default as Input } from './Input.vue';

frontend/src/components/ui/loader/DotLoader.vue

@@ -1,7 +1,11 @@
 <template>
-  <span class="dot-loader">
-    <span class="dot"></span>
-    <span class="dot"></span>
-    <span class="dot"></span>
+  <span class="inline-flex items-center">
+    <span class="w-1 h-1 rounded-full bg-current mx-0.5 animate-dot-flashing"></span>
+    <span
+      class="w-1 h-1 rounded-full bg-current mx-0.5 animate-dot-flashing [animation-delay:0.2s]"
+    ></span>
+    <span
+      class="w-1 h-1 rounded-full bg-current mx-0.5 animate-dot-flashing [animation-delay:0.4s]"
+    ></span>
   </span>
 </template>

frontend/src/components/ui/select/SelectTag.vue

@@ -1,9 +1,10 @@
 <template>
+  <!-- idk why I named this select tag, should be named multi-select -->
   <TagsInput v-model="tags" class="px-0 gap-0" :displayValue="getLabel">
     <!-- Tags visible to the user -->
     <div class="flex gap-2 flex-wrap items-center px-3">
       <TagsInputItem v-for="tagValue in tags" :key="tagValue" :value="tagValue">
-        <TagsInputItemText/>
+        <TagsInputItemText />
         <TagsInputItemDelete />
       </TagsInputItem>
     </div>
@@ -23,6 +24,8 @@
             :class="tags.length > 0 ? 'mt-2' : ''"
             @keydown.enter.prevent
             @blur="handleBlur"
+            @click="open = true"
+            @input.stop
           />
         </ComboboxInput>
       </ComboboxAnchor>
@@ -99,11 +102,14 @@ const open = ref(false)
 const searchTerm = ref('')
 
 // Get all options that are not already selected and match the search term
+// If not search term is provided, return all available options
 const filteredOptions = computed(() => {
-  return props.items.filter(
-    (item) =>
-      !tags.value.includes(item.value) &&
-      item.label.toLowerCase().includes(searchTerm.value.toLowerCase())
+  const available = props.items.filter((item) => !tags.value.includes(item.value))
+
+  if (!searchTerm.value) return available
+
+  return available.filter((item) =>
+    item.label.toLowerCase().includes(searchTerm.value.toLowerCase())
   )
 })
 
@@ -127,6 +133,8 @@ const handleSelect = (event) => {
 // Custom filter function to filter items based on the search term
 const filterFunc = (remainingItemValues, term) => {
   const remainingItems = props.items.filter((item) => remainingItemValues.includes(item.value))
-  return remainingItems.filter((item) => item.label.toLowerCase().includes(term.toLowerCase())).map(item => item.value)
+  return remainingItems
+    .filter((item) => item.label.toLowerCase().includes(term.toLowerCase()))
+    .map((item) => item.value)
 }
 </script>

frontend/src/components/ui/separator/Separator.vue

@@ -1,21 +1,17 @@
 <script setup>
-import { computed } from 'vue'
-import { Separator } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  orientation: { type: String, required: false },
-  decorative: { type: Boolean, required: false },
+  orientation: { type: String, required: false, default: 'horizontal' },
+  decorative: { type: Boolean, required: false, default: true },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
@@ -24,8 +20,8 @@ const delegatedProps = computed(() => {
     :class="
       cn(
         'shrink-0 bg-border',
-        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
-        props.class
+        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
+        props.class,
       )
     "
   />

frontend/src/components/ui/separator/index.js

@@ -1 +1 @@
-export { default as Separator } from './Separator.vue'
+export { default as Separator } from './Separator.vue';

frontend/src/components/ui/sheet/Sheet.vue

@@ -1,14 +1,14 @@
 <script setup>
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps({
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false }
-})
-const emits = defineEmits(['update:open'])
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(['update:open']);
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetClose.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { DialogClose } from 'radix-vue'
+import { DialogClose } from 'reka-ui';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetContent.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from 'vue'
+import { reactiveOmit } from '@vueuse/core';
+import { Cross2Icon } from '@radix-icons/vue';
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
-  useForwardPropsEmits
-} from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
-import { sheetVariants } from '.'
-import { cn } from '@/lib/utils'
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { sheetVariants } from '.';
 
 defineOptions({
-  inheritAttrs: false
-})
+  inheritAttrs: false,
+});
 
 const props = defineProps({
   class: { type: null, required: false },
@@ -22,8 +22,8 @@ const props = defineProps({
   trapFocus: { type: Boolean, required: false },
   disableOutsidePointerEvents: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 
 const emits = defineEmits([
   'escapeKeyDown',
@@ -31,16 +31,12 @@ const emits = defineEmits([
   'focusOutside',
   'interactOutside',
   'openAutoFocus',
-  'closeAutoFocus'
-])
+  'closeAutoFocus',
+]);
 
-const delegatedProps = computed(() => {
-  const { class: _, side, ...delegated } = props
+const delegatedProps = reactiveOmit(props, 'class', 'side');
 
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetDescription.vue

@@ -1,19 +1,15 @@
 <script setup>
-import { computed } from 'vue'
-import { DialogDescription } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetFooter.vue

@@ -1,13 +1,20 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
     <slot />
   </div>
 </template>

frontend/src/components/ui/sheet/SheetHeader.vue

@@ -1,13 +1,15 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
     <slot />
   </div>
 </template>

frontend/src/components/ui/sheet/SheetTitle.vue

@@ -1,19 +1,15 @@
 <script setup>
-import { computed } from 'vue'
-import { DialogTitle } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetTrigger.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { DialogTrigger } from 'radix-vue'
+import { DialogTrigger } from 'reka-ui';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sheet/index.js

@@ -1,13 +1,13 @@
-import { cva } from 'class-variance-authority'
+import { cva } from 'class-variance-authority';
 
-export { default as Sheet } from './Sheet.vue'
-export { default as SheetTrigger } from './SheetTrigger.vue'
-export { default as SheetClose } from './SheetClose.vue'
-export { default as SheetContent } from './SheetContent.vue'
-export { default as SheetHeader } from './SheetHeader.vue'
-export { default as SheetTitle } from './SheetTitle.vue'
-export { default as SheetDescription } from './SheetDescription.vue'
-export { default as SheetFooter } from './SheetFooter.vue'
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+export { default as SheetTrigger } from './SheetTrigger.vue';
 
 export const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
@@ -19,11 +19,11 @@ export const sheetVariants = cva(
           'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
         left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
-      }
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
     },
     defaultVariants: {
-      side: 'right'
-    }
-  }
-)
+      side: 'right',
+    },
+  },
+);

frontend/src/components/ui/sidebar/Sidebar.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { cn } from '@/lib/utils';
+import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
 
 defineOptions({
@@ -12,7 +12,6 @@ const props = defineProps({
   variant: { type: String, required: false, default: 'sidebar' },
   collapsible: { type: String, required: false, default: 'offcanvas' },
   class: { type: null, required: false },
-  collapseOnMobile: { type: Boolean, required: false, default: true },
 });
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
@@ -33,7 +32,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   </div>
 
   <Sheet
-    v-else-if="isMobile && collapseOnMobile"
+    v-else-if="isMobile"
     :open="openMobile"
     v-bind="$attrs"
     @update:open="setOpenMobile"
@@ -55,7 +54,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   <div
     v-else
-    :class="cn('group peer', collapseOnMobile ? 'hidden md:block' : 'block')"
+    class="group peer hidden md:block"
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="variant"
@@ -77,8 +76,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     <div
       :class="
         cn(
-          'duration-200 fixed inset-y-0 z-10 h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
-          collapseOnMobile ? 'hidden' : '',
+          'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
           side === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',

frontend/src/components/ui/sidebar/SidebarGroupAction.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -14,12 +14,14 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-action"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 after:md:hidden',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

frontend/src/components/ui/sidebar/SidebarGroupContent.vue

@@ -1,17 +1,13 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div
-    data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
-  >
+  <div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
     <slot />
   </div>
 </template>

frontend/src/components/ui/sidebar/SidebarGroupLabel.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -14,10 +14,13 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-      props.class)"
+    :class="
+      cn(
+        'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

frontend/src/components/ui/sidebar/SidebarHeader.vue

@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarInput.vue

@@ -1,20 +1,21 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <Input
     data-sidebar="input"
-    :class="cn(
-      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
-      props.class,
-    )"
+    :class="
+      cn(
+        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+        props.class,
+      )
+    "
   >
     <slot />
   </Input>

frontend/src/components/ui/sidebar/SidebarInset.vue

@@ -1,19 +1,20 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <main
-    :class="cn(
-      'relative flex min-h-svh flex-1 flex-col bg-background',
-      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
-      props.class,
-    )"
+    :class="
+      cn(
+        'relative flex min-h-svh flex-1 flex-col bg-background',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        props.class,
+      )
+    "
   >
     <slot />
   </main>

frontend/src/components/ui/sidebar/SidebarMenu.vue

@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuAction.vue

@@ -1,30 +1,31 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  showOnHover?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'button',
-})
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+  showOnHover: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <Primitive
     data-sidebar="menu-action"
-    :class="cn(
-      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 after:md:hidden',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      showOnHover
-        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 after:md:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+        props.class,
+      )
+    "
     :as="as"
     :as-child="asChild"
   >

frontend/src/components/ui/sidebar/SidebarMenuBadge.vue

@@ -1,24 +1,25 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <div
     data-sidebar="menu-badge"
-    :class="cn(
-      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>

frontend/src/components/ui/sidebar/SidebarMenuButton.vue

@@ -1,31 +1,40 @@
-<script setup lang="ts">
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { type Component, computed } from 'vue'
-import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
-import { useSidebar } from './utils'
+<script setup>
+import { computed } from 'vue';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue';
+import { useSidebar } from './utils';
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-  tooltip?: string | Component
-}>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
+const props = defineProps({
+  variant: { type: null, required: false, default: 'default' },
+  size: { type: null, required: false, default: 'default' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+  tooltip: { type: null, required: false },
+});
 
-const { isMobile, state } = useSidebar()
+const { isMobile, state } = useSidebar();
 
 const delegatedProps = computed(() => {
-  const { tooltip, ...delegated } = props
-  return delegated
-})
+  const { tooltip, ...delegated } = props;
+  return delegated;
+});
 </script>
 
 <template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+  <SidebarMenuButtonChild
+    v-if="!tooltip"
+    v-bind="{ ...delegatedProps, ...$attrs }"
+  >
     <slot />
   </SidebarMenuButtonChild>
 

frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -1,21 +1,16 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { sidebarMenuButtonVariants } from '.';
 
-export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants['variant']
-  size?: SidebarMenuButtonVariants['size']
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
+const props = defineProps({
+  variant: { type: null, required: false, default: 'default' },
+  size: { type: null, required: false, default: 'default' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuItem.vue

@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -1,16 +1,16 @@
-<script setup lang="ts">
-import { Skeleton } from '@/components/ui/skeleton'
-import { cn } from '@/lib/utils'
-import { computed, type HTMLAttributes } from 'vue'
+<script setup>
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+import { Skeleton } from '@/components/ui/skeleton';
 
-const props = defineProps<{
-  showIcon?: boolean
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  showIcon: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 
 const width = computed(() => {
-  return `${Math.floor(Math.random() * 40) + 50}%`
-})
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+});
 </script>
 
 <template>