fix(inbox) ui

backend/plugins/frontline_api/src/modules/inbox/graphql/resolvers/customResolvers/integration.ts

@@ -1,6 +1,9 @@
 import { IIntegrationDocument } from '@/inbox/@types/integrations';
 import { IContext } from '~/connectionResolvers';
 import { facebookStatus } from '@/integrations/facebook/messageBroker';
+import { graphRequest } from '@/integrations/facebook/utils';
+import { IFacebookPageResponse } from '@/integrations/facebook/@types/integrations';
+
 export const integrationStatus = async (
   serviceName: string,
   subdomain: string,
@@ -131,4 +134,60 @@ export default {
     }
     return serviceName;
   },
+
+  async facebookPage(
+    integration: IIntegrationDocument,
+    _args,
+    { models }: IContext,
+  ) {
+    const serviceName = integration.kind.includes('facebook')
+      ? 'facebook'
+      : integration.kind;
+
+    if (serviceName !== 'facebook') {
+      return null;
+    }
+
+    try {
+      const facebookIntegration = await models.FacebookIntegrations.findOne({
+        erxesApiId: integration._id,
+      });
+
+      if (
+        !facebookIntegration ||
+        !Array.isArray(facebookIntegration.facebookPageIds)
+      ) {
+        console.warn('No facebookIntegration or no facebookPageIds found');
+        return null;
+      }
+
+      const results: ({ pageId: string } & IFacebookPageResponse)[] = [];
+
+      for (const pageId of facebookIntegration.facebookPageIds) {
+        const token = facebookIntegration.facebookPageTokensMap?.[pageId];
+
+        if (!token) {
+          console.warn(`Token not found for pageId: ${pageId}`);
+          continue;
+        }
+
+        try {
+          const response = (await graphRequest.get(
+            `/${pageId}?fields=id,name`,
+            token,
+          )) as IFacebookPageResponse;
+
+          if (response) {
+            results.push({ pageId, ...response });
+          }
+        } catch (err) {
+          console.error(`Failed to fetch page ${pageId}:`, err);
+        }
+      }
+
+      return results.length > 0 ? results : null;
+    } catch (error) {
+      return { error };
+    }
+  },
 };

backend/plugins/frontline_api/src/modules/inbox/graphql/schemas/integration.ts

@@ -47,7 +47,7 @@ export const types = `
     webhookData: JSON
 
     brand: Brand
-
+    facebookPage: JSON
     channels: [Channel]
 
 

backend/plugins/frontline_api/src/modules/integrations/facebook/@types/integrations.ts

@@ -16,3 +16,8 @@ export interface IFacebookIntegrationDocument
     Document {
   _id: string;
 }
+
+export interface IFacebookPageResponse {
+  id: string;
+  name: string;
+}

frontend/core-ui/src/modules/notification/my-inbox/components/MyInboxNavigationItem.tsx

@@ -1,18 +1,55 @@
 import { useUnreadNotificationCount } from '@/notification/my-inbox/hooks/useUnreadNotificationCount';
 import { IconInbox } from '@tabler/icons-react';
-import { NavigationMenuLinkItem, Skeleton } from 'erxes-ui';
+import {
+  NavigationMenuLinkItem,
+  Skeleton,
+  Button,
+  DropdownMenu,
+} from 'erxes-ui';
 import { useTranslation } from 'react-i18next';
+import { IconDotsVertical, IconSettings } from '@tabler/icons-react';
+import { useNavigate } from 'react-router';
 
 export const MyInboxNavigationItem = () => {
   const { t } = useTranslation();
-
+  const navigate = useNavigate();
   return (
-    <NavigationMenuLinkItem
-      path={'my-inbox'}
-      name={t('My inbox')}
-      icon={IconInbox}
-      children={<NotificationCount />}
-    />
+    <div className="relative group/trigger">
+      <NavigationMenuLinkItem
+        path="my-inbox"
+        name={t('My inbox')}
+        icon={IconInbox}
+      >
+        <NotificationCount />
+      </NavigationMenuLinkItem>
+
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="invisible group-hover/trigger:visible absolute top-1/2 -translate-y-1/2 right-1 text-muted-foreground"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <IconDotsVertical className="size-4" />
+          </Button>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content
+          side="right"
+          align="start"
+          className="w-60 min-w-0"
+        >
+          <DropdownMenu.Item
+            className="cursor-pointer"
+            onSelect={() => navigate(`settings/inbox/integrations`)}
+          >
+            <IconSettings className="size-4" />
+            Go to inbox settings
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </div>
   );
 };
 

frontend/plugins/frontline_ui/src/modules/integrations/erxes-messenger/graphql/queries/integrationDetailQuery.ts

@@ -9,6 +9,7 @@ export const EM_INTEGRATION_DETAIL_QUERY = gql`
       languageCode
       channels {
         _id
+        name
       }
       messengerData
       callData {

frontend/plugins/frontline_ui/src/modules/integrations/facebook/components/FacebookIntegrationDetail.tsx

@@ -93,7 +93,6 @@ export const FacebookIntegrationEditForm = ({
   };
 
   if (loading) return <Spinner className="p-20" />;
-
   return (
     <>
       <Dialog.Header className="flex-row items-center justify-between space-y-0 px-4 py-3">
@@ -109,6 +108,25 @@ export const FacebookIntegrationEditForm = ({
           })}
         >
           <div className="p-6 pb-8 space-y-6">
+            <Form.Field
+              name="facebookPage"
+              render={({ field }) => {
+                const facebookPageName = field.value?.[0] ?? null;
+                return (
+                  <Form.Item>
+                    <Form.Label>Page Name</Form.Label>
+                    <Form.Control>
+                      <Input
+                        name={field.name}
+                        value={facebookPageName?.name || ''}
+                        disabled
+                        readOnly
+                      />
+                    </Form.Control>
+                  </Form.Item>
+                );
+              }}
+            />
             <Form.Field
               name="name"
               render={({ field }) => (
@@ -134,18 +152,20 @@ export const FacebookIntegrationEditForm = ({
               )}
             />
             <Form.Field
-              name="channelIds"
-              render={({ field }) => (
-                <Form.Item>
-                  <Form.Label>Channels</Form.Label>
-                  <SelectChannel.FormItem
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    mode="multiple"
-                  />
-                  <Form.Message />
-                </Form.Item>
-              )}
+              name="channels"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>Channels</Form.Label>
+                    <SelectChannel.FormItem
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      mode="multiple"
+                    />
+                    <Form.Message />
+                  </Form.Item>
+                );
+              }}
             />
           </div>
           <Separator />

frontend/plugins/frontline_ui/src/modules/integrations/graphql/queries/getIntegrationDetail.ts

@@ -17,9 +17,11 @@ export const GET_INTEGRATION_DETAIL = gql`
       isConnected
       channels {
         _id
+        name
       }
       departmentIds
       details
+      facebookPage
       callData {
         secondPageHeader
         secondPageDescription