@greatapps/greatagents-ui 0.3.12 → 0.3.13

package/src/pages/integrations-management-page.tsx

@@ -1,9 +1,13 @@
 'use client';
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useCallback } from "react";
 import { useToolCredentials, useAgents, useTools } from "../hooks";
 import { ToolCredentialsForm } from "../components/tools/tool-credentials-form";
-import { IntegrationsTab } from "../components/capabilities/integrations-tab";
+import { IntegrationCard } from "../components/capabilities/integration-card";
+import { IntegrationWizard } from "../components/capabilities/integration-wizard";
+import { useIntegrationState, type IntegrationCardData } from "../hooks/use-integrations";
+import type { WizardIntegrationMeta } from "../components/capabilities/types";
+import type { ConfigOption } from "../components/capabilities/wizard-steps/config-step";
 import {
   Badge,
   Button,
@@ -12,28 +16,25 @@ import {
   TabsList,
   TabsTrigger,
 } from "@greatapps/greatauth-ui/ui";
-import { Plus, Plug, KeyRound, Info } from "lucide-react";
+import { Plus, Plug, KeyRound, Info, Loader2 } from "lucide-react";
 import type { GagentsHookConfig } from "../hooks/types";
-import type { IntegrationCardData } from "../hooks/use-integrations";
 import type { Agent, Tool, ToolCredential } from "../types";
 
 export interface IntegrationsManagementPageProps {
   config: GagentsHookConfig;
   gagentsApiUrl: string;
-  /** Called when user clicks connect/reconnect on an integration card. */
-  onConnect?: (card: IntegrationCardData) => void;
+  /** Resolve wizard metadata for a given integration card. */
+  resolveWizardMeta?: (card: IntegrationCardData) => WizardIntegrationMeta;
+  /** Load config options after OAuth completes (e.g. list of calendars). */
+  loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
+  /** Called after wizard completes successfully. */
+  onWizardComplete?: () => void;
   title?: string;
   subtitle?: string;
 }
 
 /**
- * Build a map of credential id → list of agent names that use it.
- * Cross-references tools (which link credential via id) with agents
- * that have agent_tools referencing those tools.
- *
- * Since we don't have an account-level agent_tools endpoint, we
- * approximate by checking which tools are linked to credentials and
- * showing credential-level stats.
+ * Build a map of credential id -> list of agent names that use it.
  */
 function useCredentialAgentSummary(
   credentials: ToolCredential[],
@@ -41,12 +42,10 @@ function useCredentialAgentSummary(
   agents: Agent[],
 ) {
   return useMemo(() => {
-    // Build a set of tool IDs that have credentials
     const toolIdsWithCredentials = new Set(
       credentials.map((c) => c.id_tool).filter(Boolean),
     );
 
-    // Count how many credentials are linked to tools that agents could use
     const linkedCount = credentials.filter(
       (c) => c.id_tool && toolIdsWithCredentials.has(c.id_tool),
     ).length;
@@ -63,7 +62,9 @@ function useCredentialAgentSummary(
 export function IntegrationsManagementPage({
   config,
   gagentsApiUrl,
-  onConnect,
+  resolveWizardMeta,
+  loadConfigOptions,
+  onWizardComplete,
   title = "Integrações e Credenciais",
   subtitle = "Gerencie todas as integrações e credenciais da conta.",
 }: IntegrationsManagementPageProps) {
@@ -73,12 +74,54 @@ export function IntegrationsManagementPage({
   const { data: toolsData } = useTools(config);
   const [createOpen, setCreateOpen] = useState(false);
 
+  // Integration cards state (account-level, agentId=null)
+  const { cards, isLoading: cardsLoading } = useIntegrationState(config, null);
+
+  // Wizard state
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [activeCard, setActiveCard] = useState<IntegrationCardData | null>(null);
+
   const credentials = credentialsData?.data || [];
   const agents: Agent[] = agentsData?.data || [];
   const tools: Tool[] = toolsData?.data || [];
 
   const summary = useCredentialAgentSummary(credentials, tools, agents);
 
+  const handleConnect = useCallback((card: IntegrationCardData) => {
+    setActiveCard(card);
+    setWizardOpen(true);
+  }, []);
+
+  const handleWizardClose = useCallback((open: boolean) => {
+    if (!open) {
+      setActiveCard(null);
+    }
+    setWizardOpen(open);
+  }, []);
+
+  const handleWizardComplete = useCallback(() => {
+    setWizardOpen(false);
+    setActiveCard(null);
+    onWizardComplete?.();
+  }, [onWizardComplete]);
+
+  // Resolve wizard meta with sensible defaults
+  const wizardMeta: WizardIntegrationMeta | null = activeCard
+    ? (resolveWizardMeta?.(activeCard) ?? {
+        capabilities: [],
+        requirements: [],
+        hasConfigStep: false,
+      })
+    : null;
+
+  // Split integration cards
+  const connectedCards = cards.filter(
+    (c) => !c.isAddNew && (c.state === "connected" || c.state === "expired"),
+  );
+  const otherCards = cards.filter(
+    (c) => c.isAddNew || c.state === "coming_soon",
+  );
+
   return (
     <div className="flex flex-col gap-4 p-4 md:p-6">
       <div className="flex items-center justify-between">
@@ -101,11 +144,61 @@ export function IntegrationsManagementPage({
         </TabsList>
 
         <TabsContent value="integrations" className="mt-4">
-          <IntegrationsTab
-            config={config}
-            agentId={null}
-            onConnect={onConnect ?? (() => {})}
-          />
+          {cardsLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : cards.length === 0 ? (
+            <div className="flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground">
+              <Plug className="h-10 w-10" />
+              <p className="text-sm">Nenhuma integração disponível</p>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {/* Connected accounts */}
+              {connectedCards.length > 0 && (
+                <div>
+                  <h3 className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                    Contas conectadas
+                  </h3>
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                    {connectedCards.map((card) => (
+                      <IntegrationCard
+                        key={`${card.definition.slug}-cred-${card.credentialId}`}
+                        card={card}
+                        onConnect={handleConnect}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Add new / coming soon */}
+              {otherCards.length > 0 && (
+                <div>
+                  {connectedCards.length > 0 && (
+                    <h3 className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                      Adicionar integração
+                    </h3>
+                  )}
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                    {otherCards.map((card) => {
+                      const key = card.isAddNew
+                        ? `${card.definition.slug}-add-new`
+                        : card.definition.slug;
+                      return (
+                        <IntegrationCard
+                          key={key}
+                          card={card}
+                          onConnect={handleConnect}
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
         </TabsContent>
 
         <TabsContent value="credentials" className="mt-4">
@@ -161,6 +254,22 @@ export function IntegrationsManagementPage({
           />
         </TabsContent>
       </Tabs>
+
+      {/* Integration Wizard */}
+      {activeCard && wizardMeta && (
+        <IntegrationWizard
+          open={wizardOpen}
+          onOpenChange={handleWizardClose}
+          integration={activeCard.definition}
+          meta={wizardMeta}
+          agentId={0}
+          config={config}
+          gagentsApiUrl={gagentsApiUrl}
+          existingCredentialId={activeCard.credentialId}
+          onComplete={handleWizardComplete}
+          loadConfigOptions={loadConfigOptions}
+        />
+      )}
     </div>
   );
 }