From 707f76324f9f20c2603fe31309a10b4036c1270a Mon Sep 17 00:00:00 2001
From: Aman Ullah <find.aman.u@gmail.com>
Date: Wed, 20 May 2026 19:59:28 +0300
Subject: [PATCH] feat(dashboard): copy group id in message tester

---
 dashboard/src/i18n/locales/en.json    |  7 +++-
 dashboard/src/i18n/locales/he.json    |  7 +++-
 dashboard/src/pages/MessageTester.css |  5 +++
 dashboard/src/pages/MessageTester.tsx | 56 ++++++++++++++++++++-------
 4 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/dashboard/src/i18n/locales/en.json b/dashboard/src/i18n/locales/en.json
index 5304924..33ffa74 100644
--- a/dashboard/src/i18n/locales/en.json
+++ b/dashboard/src/i18n/locales/en.json
@@ -359,7 +359,12 @@
       "messageId": "Message ID",
       "error": "Error"
     },
-    "sendFailed": "Failed to send message"
+    "sendFailed": "Failed to send message",
+    "copyGroupId": "Copy ID",
+    "copyGroupIdSuccessTitle": "Group ID Copied",
+    "copyGroupIdSuccessMessage": "The selected group ID was copied to the clipboard.",
+    "copyGroupIdFailedTitle": "Copy Failed",
+    "copyGroupIdFailedMessage": "Unable to copy the selected group ID. Please try again."
   },
   "infrastructure": {
     "title": "Infrastructure",
diff --git a/dashboard/src/i18n/locales/he.json b/dashboard/src/i18n/locales/he.json
index 6088a1d..a0695f9 100644
--- a/dashboard/src/i18n/locales/he.json
+++ b/dashboard/src/i18n/locales/he.json
@@ -359,7 +359,12 @@
       "messageId": "מזהה הודעה",
       "error": "שגיאה"
     },
-    "sendFailed": "שליחת ההודעה נכשלה"
+    "sendFailed": "שליחת ההודעה נכשלה",
+    "copyGroupId": "העתק מזהה",
+    "copyGroupIdSuccessTitle": "המזהה הועתק",
+    "copyGroupIdSuccessMessage": "מזהה הקבוצה שנבחרה הועתק ללוח.",
+    "copyGroupIdFailedTitle": "העתקה נכשלה",
+    "copyGroupIdFailedMessage": "לא ניתן להעתיק את מזהה הקבוצה הנבחר. נסה שוב."
   },
   "infrastructure": {
     "title": "תשתית",
diff --git a/dashboard/src/pages/MessageTester.css b/dashboard/src/pages/MessageTester.css
index 59ba001..9b57022 100644
--- a/dashboard/src/pages/MessageTester.css
+++ b/dashboard/src/pages/MessageTester.css
@@ -135,6 +135,11 @@
   cursor: not-allowed;
 }
 
+.copy-btn {
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
 .response-status {
   display: flex;
   align-items: center;
diff --git a/dashboard/src/pages/MessageTester.tsx b/dashboard/src/pages/MessageTester.tsx
index 57166ad..96e7f3f 100644
--- a/dashboard/src/pages/MessageTester.tsx
+++ b/dashboard/src/pages/MessageTester.tsx
@@ -6,6 +6,7 @@ import { useDocumentTitle } from '../hooks/useDocumentTitle';
 import { useRole } from '../hooks/useRole';
 import { useSessionsQuery, useSessionGroupsQuery } from '../hooks/queries';
 import { PageHeader } from '../components/PageHeader';
+import { useToast } from '../components/Toast';
 import './MessageTester.css';
 
 interface ApiResponse {
@@ -32,6 +33,7 @@ export function MessageTester() {
   const [mediaUrl, setMediaUrl] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [response, setResponse] = useState<ApiResponse | null>(null);
+  const toast = useToast();
 
   const { data: groups = [], isLoading: loadingGroups } = useSessionGroupsQuery(
     session,
@@ -53,6 +55,22 @@ export function MessageTester() {
     }
   }, [groups, selectedGroup, recipientType]);
 
+  const handleCopyGroupId = async () => {
+    if (!selectedGroup) return;
+
+    if (!navigator.clipboard?.writeText) {
+      toast.error(t('messageTester.copyGroupIdFailedTitle'), t('messageTester.copyGroupIdFailedMessage'));
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(selectedGroup);
+      toast.success(t('messageTester.copyGroupIdSuccessTitle'), t('messageTester.copyGroupIdSuccessMessage'));
+    } catch {
+      toast.error(t('messageTester.copyGroupIdFailedTitle'), t('messageTester.copyGroupIdFailedMessage'));
+    }
+  };
+
   const handleSend = async () => {
     const targetId = recipientType === 'group' ? selectedGroup : recipient;
     if (!session || !targetId) return;
@@ -141,19 +159,31 @@ export function MessageTester() {
             <label>{recipientType === 'group' ? t('messageTester.selectGroup') : t('messageTester.recipientPhone')}</label>
             {recipientType === 'group' ? (
               <>
-                <select
-                  value={selectedGroup}
-                  onChange={e => setSelectedGroup(e.target.value)}
-                  disabled={loadingGroups || groups.length === 0}
-                >
-                  {loadingGroups && <option value="">{t('messageTester.loadingGroups')}</option>}
-                  {!loadingGroups && groups.length === 0 && <option value="">{t('messageTester.noGroupsFound')}</option>}
-                  {groups.map(g => (
-                    <option key={g.id} value={g.id}>
-                      {g.name}
-                    </option>
-                  ))}
-                </select>
+                <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+                  <select
+                    value={selectedGroup}
+                    onChange={e => setSelectedGroup(e.target.value)}
+                    disabled={loadingGroups || groups.length === 0}
+                  >
+                    {loadingGroups && <option value="">{t('messageTester.loadingGroups')}</option>}
+                    {!loadingGroups && groups.length === 0 && <option value="">{t('messageTester.noGroupsFound')}</option>}
+                    {groups.map(g => (
+                      <option key={g.id} value={g.id}>
+                        {g.name}
+                      </option>
+                    ))}
+                  </select>
+                  {groups.length > 0 &&
+                    <button
+                      type="button"
+                      className="copy-btn"
+                      onClick={handleCopyGroupId}
+                      disabled={!selectedGroup}
+                    >
+                      {t('messageTester.copyGroupId')}
+                    </button>
+                  }
+                </div>
                 <span className="hint">{t('messageTester.selectGroupHint')}</span>
               </>
             ) : (