@greatapps/greatagents-ui 0.3.2 → 0.3.4

package/src/components/capabilities/capabilities-tab.tsx

@@ -0,0 +1,475 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import type { GagentsHookConfig } from "../../hooks/types";
+import {
+  useCapabilities,
+  useAgentCapabilities,
+  useUpdateAgentCapabilities,
+} from "../../hooks";
+import type {
+  CapabilityCategory,
+  CapabilityModule,
+  AgentCapability,
+  AgentCapabilitiesPayload,
+} from "../../types/capabilities";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Switch,
+  Checkbox,
+  Badge,
+  Button,
+  Skeleton,
+} from "@greatapps/greatauth-ui/ui";
+import {
+  Calendar,
+  Users,
+  Settings,
+  HeartHandshake,
+  Package,
+  ChevronDown,
+} from "lucide-react";
+import { toast } from "sonner";
+
+// ---------------------------------------------------------------------------
+// Operation label mapping (pt-BR)
+// ---------------------------------------------------------------------------
+
+const OPERATION_LABELS: Record<string, string> = {
+  list: "Listar",
+  view: "Visualizar",
+  create: "Criar",
+  update: "Atualizar",
+};
+
+function getOperationLabel(slug: string): string {
+  return OPERATION_LABELS[slug] ?? slug;
+}
+
+// ---------------------------------------------------------------------------
+// Category icon mapping
+// ---------------------------------------------------------------------------
+
+const CATEGORY_ICONS: Record<string, React.ElementType> = {
+  agenda: Calendar,
+  cadastros: Users,
+  infraestrutura: Settings,
+  relacionamentos: HeartHandshake,
+};
+
+function getCategoryIcon(slug: string): React.ElementType {
+  return CATEGORY_ICONS[slug] ?? Package;
+}
+
+// ---------------------------------------------------------------------------
+// Internal state helpers
+// ---------------------------------------------------------------------------
+
+/** Map from module slug -> set of enabled operation slugs */
+type CapabilityState = Map<string, Set<string>>;
+
+function buildStateFromAgent(agentCaps: AgentCapability[]): CapabilityState {
+  const state: CapabilityState = new Map();
+  for (const cap of agentCaps) {
+    state.set(cap.module, new Set(cap.operations));
+  }
+  return state;
+}
+
+function stateToPayload(state: CapabilityState): AgentCapabilitiesPayload {
+  const capabilities: AgentCapability[] = [];
+  state.forEach((ops, mod) => {
+    if (ops.size > 0) {
+      capabilities.push({ module: mod, operations: Array.from(ops) });
+    }
+  });
+  return { capabilities };
+}
+
+function cloneState(state: CapabilityState): CapabilityState {
+  const next: CapabilityState = new Map();
+  state.forEach((ops, mod) => next.set(mod, new Set(ops)));
+  return next;
+}
+
+function statesEqual(a: CapabilityState, b: CapabilityState): boolean {
+  if (a.size !== b.size) return false;
+  for (const [mod, opsA] of a) {
+    const opsB = b.get(mod);
+    if (!opsB || opsA.size !== opsB.size) return false;
+    for (const op of opsA) {
+      if (!opsB.has(op)) return false;
+    }
+  }
+  return true;
+}
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface CapabilitiesTabProps {
+  config: GagentsHookConfig;
+  agentId: number;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
+  const { data: registry, isLoading: isLoadingRegistry } = useCapabilities(config);
+  const { data: agentCaps, isLoading: isLoadingAgent } = useAgentCapabilities(config, agentId);
+  const updateMutation = useUpdateAgentCapabilities(config);
+
+  // Local state for optimistic updates
+  const [localState, setLocalState] = useState<CapabilityState>(new Map());
+  const [serverState, setServerState] = useState<CapabilityState>(new Map());
+  const [initialized, setInitialized] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Sync server data into local state on first load / refetch
+  useEffect(() => {
+    if (agentCaps && !initialized) {
+      const state = buildStateFromAgent(agentCaps);
+      setLocalState(state);
+      setServerState(cloneState(state));
+      setInitialized(true);
+    }
+  }, [agentCaps, initialized]);
+
+  // Reset initialized when agentId changes
+  useEffect(() => {
+    setInitialized(false);
+  }, [agentId]);
+
+  const hasChanges = useMemo(
+    () => initialized && !statesEqual(localState, serverState),
+    [localState, serverState, initialized],
+  );
+
+  // ------ Debounced save ------
+  const scheduleSave = useCallback(
+    (nextState: CapabilityState) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        const payload = stateToPayload(nextState);
+        updateMutation.mutate(
+          { agentId, payload },
+          {
+            onSuccess: () => {
+              setServerState(cloneState(nextState));
+              toast.success("Capacidades salvas");
+            },
+            onError: () => {
+              // Rollback to server state
+              setLocalState(cloneState(serverState));
+              toast.error("Erro ao salvar capacidades");
+            },
+          },
+        );
+      }, 500);
+    },
+    [agentId, updateMutation, serverState],
+  );
+
+  // ------ State mutation helpers ------
+  const updateState = useCallback(
+    (updater: (prev: CapabilityState) => CapabilityState) => {
+      setLocalState((prev) => {
+        const next = updater(prev);
+        scheduleSave(next);
+        return next;
+      });
+    },
+    [scheduleSave],
+  );
+
+  const toggleModule = useCallback(
+    (mod: CapabilityModule, enabled: boolean) => {
+      updateState((prev) => {
+        const next = cloneState(prev);
+        if (enabled) {
+          next.set(mod.slug, new Set(mod.operations));
+        } else {
+          next.delete(mod.slug);
+        }
+        return next;
+      });
+    },
+    [updateState],
+  );
+
+  const toggleOperation = useCallback(
+    (mod: CapabilityModule, opSlug: string, enabled: boolean) => {
+      updateState((prev) => {
+        const next = cloneState(prev);
+        const ops = new Set(next.get(mod.slug) ?? []);
+        if (enabled) {
+          ops.add(opSlug);
+        } else {
+          ops.delete(opSlug);
+        }
+        if (ops.size > 0) {
+          next.set(mod.slug, ops);
+        } else {
+          next.delete(mod.slug);
+        }
+        return next;
+      });
+    },
+    [updateState],
+  );
+
+  const enableAll = useCallback(() => {
+    if (!registry) return;
+    updateState(() => {
+      const next: CapabilityState = new Map();
+      for (const cat of registry.categories) {
+        for (const mod of cat.modules) {
+          next.set(mod.slug, new Set(mod.operations));
+        }
+      }
+      return next;
+    });
+  }, [registry, updateState]);
+
+  const disableAll = useCallback(() => {
+    updateState(() => new Map());
+  }, [updateState]);
+
+  const discard = useCallback(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    setLocalState(cloneState(serverState));
+  }, [serverState]);
+
+  const saveNow = useCallback(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    const payload = stateToPayload(localState);
+    updateMutation.mutate(
+      { agentId, payload },
+      {
+        onSuccess: () => {
+          setServerState(cloneState(localState));
+          toast.success("Capacidades salvas");
+        },
+        onError: () => {
+          setLocalState(cloneState(serverState));
+          toast.error("Erro ao salvar capacidades");
+        },
+      },
+    );
+  }, [agentId, localState, serverState, updateMutation]);
+
+  // ------ Counting helpers ------
+  function countActiveModules(cat: CapabilityCategory): number {
+    return cat.modules.filter((m) => (localState.get(m.slug)?.size ?? 0) > 0).length;
+  }
+
+  // ------ Loading state ------
+  if (isLoadingRegistry || isLoadingAgent) {
+    return (
+      <div className="space-y-3">
+        {[1, 2, 3, 4].map((i) => (
+          <Skeleton key={i} className="h-14 w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  // ------ Empty state ------
+  if (!registry || !registry.categories.length) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <Package className="h-12 w-12 text-muted-foreground mb-3" />
+        <h3 className="text-base font-medium">Nenhuma capacidade disponível</h3>
+        <p className="text-sm text-muted-foreground mt-1 max-w-sm">
+          Este produto ainda não possui capacidades registadas. As capacidades serão
+          adicionadas automaticamente quando o produto for configurado.
+        </p>
+      </div>
+    );
+  }
+
+  // ------ Render ------
+  return (
+    <div className="space-y-4">
+      {/* Header with global actions */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-sm font-medium">Capacidades do agente</h3>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Ative ou desative módulos e operações disponíveis para este agente.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={enableAll}>
+            Ativar tudo
+          </Button>
+          <Button variant="outline" size="sm" onClick={disableAll}>
+            Desativar tudo
+          </Button>
+        </div>
+      </div>
+
+      {/* Category accordions */}
+      <Accordion type="multiple" className="space-y-2">
+        {registry.categories.map((cat) => {
+          const Icon = getCategoryIcon(cat.slug);
+          const activeCount = countActiveModules(cat);
+          const totalModules = cat.modules.length;
+
+          return (
+            <AccordionItem
+              key={cat.slug}
+              value={cat.slug}
+              className="border rounded-lg px-4"
+            >
+              <AccordionTrigger className="hover:no-underline py-3">
+                <div className="flex items-center gap-3 flex-1">
+                  <Icon className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium text-sm">{cat.label}</span>
+                  <Badge variant="secondary" className="text-xs">
+                    {activeCount} de {totalModules} módulos ativos
+                  </Badge>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="pb-3">
+                <div className="space-y-1">
+                  {cat.modules.map((mod) => {
+                    const enabledOps = localState.get(mod.slug);
+                    const isModuleOn = (enabledOps?.size ?? 0) > 0;
+                    const allOpsEnabled =
+                      enabledOps?.size === mod.operations.length;
+
+                    return (
+                      <ModuleRow
+                        key={mod.slug}
+                        module={mod}
+                        isOn={isModuleOn}
+                        allOpsEnabled={allOpsEnabled}
+                        enabledOps={enabledOps ?? new Set()}
+                        onToggleModule={(on) => toggleModule(mod, on)}
+                        onToggleOperation={(op, on) =>
+                          toggleOperation(mod, op, on)
+                        }
+                      />
+                    );
+                  })}
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          );
+        })}
+      </Accordion>
+
+      {/* Save bar */}
+      {hasChanges && (
+        <div className="sticky bottom-0 bg-background border-t py-3 px-4 -mx-4 flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">
+            Você tem alterações não salvas.
+          </span>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={discard}>
+              Descartar
+            </Button>
+            <Button
+              size="sm"
+              onClick={saveNow}
+              disabled={updateMutation.isPending}
+            >
+              {updateMutation.isPending ? "Salvando..." : "Salvar"}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ModuleRow sub-component
+// ---------------------------------------------------------------------------
+
+interface ModuleRowProps {
+  module: CapabilityModule;
+  isOn: boolean;
+  allOpsEnabled: boolean;
+  enabledOps: Set<string>;
+  onToggleModule: (on: boolean) => void;
+  onToggleOperation: (op: string, on: boolean) => void;
+}
+
+function ModuleRow({
+  module: mod,
+  isOn,
+  enabledOps,
+  onToggleModule,
+  onToggleOperation,
+}: ModuleRowProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="rounded-md border px-3 py-2">
+      <div className="flex items-center justify-between">
+        <button
+          type="button"
+          className="flex items-center gap-2 flex-1 text-left"
+          onClick={() => setExpanded(!expanded)}
+          aria-expanded={expanded}
+          aria-label={`Expandir ${mod.label}`}
+        >
+          <ChevronDown
+            className={`h-3.5 w-3.5 text-muted-foreground transition-transform ${
+              expanded ? "rotate-0" : "-rotate-90"
+            }`}
+          />
+          <span className="text-sm font-medium">{mod.label}</span>
+          {mod.description && (
+            <span className="text-xs text-muted-foreground hidden sm:inline">
+              — {mod.description}
+            </span>
+          )}
+          {isOn && (
+            <Badge variant="secondary" className="text-xs ml-1">
+              {enabledOps.size}/{mod.operations.length}
+            </Badge>
+          )}
+        </button>
+        <Switch
+          checked={isOn}
+          onCheckedChange={onToggleModule}
+          aria-label={`Ativar módulo ${mod.label}`}
+        />
+      </div>
+
+      {expanded && (
+        <div className="mt-2 ml-6 flex flex-wrap gap-x-5 gap-y-1.5 pb-1">
+          {mod.operations.map((op) => {
+            const checked = enabledOps.has(op);
+            return (
+              <label
+                key={op}
+                className="flex items-center gap-1.5 text-sm cursor-pointer"
+              >
+                <Checkbox
+                  checked={checked}
+                  onCheckedChange={(val) =>
+                    onToggleOperation(op, val === true)
+                  }
+                  aria-label={`${getOperationLabel(op)} em ${mod.label}`}
+                />
+                <span className={checked ? "" : "text-muted-foreground"}>
+                  {getOperationLabel(op)}
+                </span>
+              </label>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/capabilities/integration-card.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import type { IntegrationCardData, IntegrationCardState } from "../../hooks/use-integrations";
+import { Badge, Button, Tooltip, TooltipContent, TooltipTrigger } from "@greatapps/greatauth-ui/ui";
+import {
+  CalendarSync,
+  Plug,
+  Settings,
+  RefreshCw,
+  Users,
+  Clock,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "../../lib";
+
+// ---------------------------------------------------------------------------
+// Icon mapping — extend as new integrations are added
+// ---------------------------------------------------------------------------
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  CalendarSync,
+  Plug,
+  Settings,
+  RefreshCw,
+  Users,
+  Clock,
+};
+
+function resolveIcon(name: string): LucideIcon {
+  return ICON_MAP[name] ?? Plug;
+}
+
+// ---------------------------------------------------------------------------
+// Badge helpers
+// ---------------------------------------------------------------------------
+
+interface BadgeVariant {
+  label: string;
+  className: string;
+}
+
+const STATE_BADGES: Record<IntegrationCardState, BadgeVariant> = {
+  available: {
+    label: "Disponível",
+    className: "bg-muted text-muted-foreground",
+  },
+  connected: {
+    label: "Conectado",
+    className: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+  },
+  expired: {
+    label: "Expirado",
+    className: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
+  },
+  coming_soon: {
+    label: "Em breve",
+    className: "bg-muted text-muted-foreground",
+  },
+};
+
+function getActionLabel(state: IntegrationCardState): string {
+  switch (state) {
+    case "available":
+      return "Conectar";
+    case "connected":
+      return "Configurar";
+    case "expired":
+      return "Reconectar";
+    default:
+      return "";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export interface IntegrationCardProps {
+  card: IntegrationCardData;
+  onConnect: (card: IntegrationCardData) => void;
+}
+
+export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
+  const { definition, state, sharedByAgentsCount } = card;
+  const Icon = resolveIcon(definition.icon);
+  const badge = STATE_BADGES[state];
+  const actionLabel = getActionLabel(state);
+  const isComingSoon = state === "coming_soon";
+
+  return (
+    <div
+      className={cn(
+        "group relative flex flex-col gap-3 rounded-xl border bg-card p-5 transition-shadow",
+        isComingSoon
+          ? "opacity-60 cursor-default"
+          : "hover:shadow-md cursor-pointer",
+      )}
+      role="button"
+      tabIndex={isComingSoon ? -1 : 0}
+      aria-label={`${definition.name} — ${badge.label}`}
+      aria-disabled={isComingSoon}
+      onClick={() => !isComingSoon && onConnect(card)}
+      onKeyDown={(e) => {
+        if (!isComingSoon && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onConnect(card);
+        }
+      }}
+    >
+      {/* Header row */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <Icon className="h-5 w-5" />
+        </div>
+        <Badge variant="outline" className={cn("text-xs", badge.className)}>
+          {badge.label}
+        </Badge>
+      </div>
+
+      {/* Name + description */}
+      <div className="space-y-1">
+        <h3 className="text-sm font-semibold leading-tight">{definition.name}</h3>
+        <p className="text-xs text-muted-foreground leading-relaxed">
+          {definition.description}
+        </p>
+      </div>
+
+      {/* Footer */}
+      <div className="mt-auto flex items-center justify-between gap-2 pt-1">
+        {sharedByAgentsCount > 0 ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400">
+                <Users className="h-3.5 w-3.5" />
+                Compartilhada
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              Esta credencial está disponível para todos os agentes da conta
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <span />
+        )}
+
+        {!isComingSoon && (
+          <Button
+            variant={state === "expired" ? "destructive" : "outline"}
+            size="sm"
+            className="text-xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              onConnect(card);
+            }}
+          >
+            {actionLabel}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}