From b2839830c87c32be908c6b9e669bd9310527cbb3 Mon Sep 17 00:00:00 2001
From: spandev <143828642+Spandan-Mishra@users.noreply.github.com>
Date: Tue, 28 Oct 2025 17:10:47 +0530
Subject: [PATCH] update: added empty screen component to empty call history
 page (#24721)

Co-authored-by: Pallav <90088723+Pallava-Joshi@users.noreply.github.com>
---
 .../insights/insights-call-history-view.tsx       | 15 +++++++++++++--
 apps/web/public/static/locales/en/common.json     |  2 ++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/modules/insights/insights-call-history-view.tsx b/apps/web/modules/insights/insights-call-history-view.tsx
index 0fbcbe8617..f98d47f2a7 100644
--- a/apps/web/modules/insights/insights-call-history-view.tsx
+++ b/apps/web/modules/insights/insights-call-history-view.tsx
@@ -22,6 +22,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Badge } from "@calcom/ui/components/badge";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 type CallHistoryRow = {
   id: string;
@@ -79,7 +80,7 @@ function CallHistoryContent({ org: _org }: CallHistoryProps) {
   const [rowSelection, setRowSelection] = useState({});
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  const { limit, offset, searchTerm: _searchTerm } = useDataTable();
+  const { limit, offset, searchTerm } = useDataTable();
 
   const {
     data: callsData,
@@ -114,7 +115,7 @@ function CallHistoryContent({ org: _org }: CallHistoryProps) {
       callCreated: call.call_analysis?.call_successful ?? true,
       inVoicemail: call.call_analysis?.in_voicemail ?? false,
     }));
-  }, [callsData?.calls]);
+  }, [callsData?.calls, t]);
 
   const columns = useMemo<ColumnDef<CallHistoryRow>[]>(
     () => [
@@ -310,6 +311,16 @@ function CallHistoryContent({ org: _org }: CallHistoryProps) {
             <DataTableFilters.ClearFiltersButton />
           </>
         }
+        EmptyView={
+          <div className="px-6 py-8">
+            <EmptyScreen
+              Icon="phone"
+              headline={searchTerm ? t("no_result_found_for", { searchTerm }) : t("no_call_history")}
+              description={t("no_call_history_description")}
+              className="mb-16"
+            />
+          </div>
+        }
       />
 
       {state.callDetailsSheet.showModal && <CallDetailsSheet state={state} dispatch={dispatch} />}
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 9867807d2e..afca72238a 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -943,6 +943,8 @@
   "new_event_type_heading": "Create your first event type",
   "new_event_type_description": "Event types enable you to share links that show available times on your calendar and allow people to make bookings with you.",
   "event_type_created_successfully": "{{eventTypeTitle}} event type created successfully",
+  "no_call_history": "No call history",
+  "no_call_history_description": "No matching call history found for the particular account/search query.",
   "event_type_updated_successfully": "{{eventTypeTitle}} event type updated successfully",
   "event_type_deleted_successfully": "Event type deleted successfully",
   "hours": "Hours",