@greatapps/greatchat-ui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatchat-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -23,11 +23,13 @@
     "react": "^19",
     "react-dom": "^19",
     "@tanstack/react-query": "^5",
+    "@tanstack/react-table": "^8",
     "lucide-react": "*",
     "date-fns": "*",
     "sonner": "*"
   },
   "dependencies": {
+    "@greatapps/greatauth-ui": "^0.1.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2",
     "cmdk": "^1.1.1",
@@ -41,6 +43,7 @@
     "react-dom": "^19",
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "@tanstack/react-query": "latest"
+    "@tanstack/react-query": "latest",
+    "@tanstack/react-table": "latest"
   }
 }

package/src/components/channel-card.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { Channel } from "../types";
+import type { GchatHookConfig } from "../hooks/types";
+import { useChannelWhatsappStatus } from "../hooks/use-channels";
+import { WhatsappStatusBadge } from "./whatsapp-status-badge";
+import { Button } from "./ui/button";
+
+export interface ChannelCardProps {
+  channel: Channel;
+  config: GchatHookConfig;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  linkedAgentName?: string;
+  linkedAgentActive?: boolean;
+  actions?: ReactNode;
+}
+
+export function ChannelCard({
+  channel,
+  config,
+  onEdit,
+  onDelete,
+  linkedAgentName,
+  linkedAgentActive = true,
+  actions,
+}: ChannelCardProps) {
+  const { data: status } = useChannelWhatsappStatus(config, channel.id);
+  const hasSession = !!channel.external_id;
+
+  return (
+    <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+      <div className="flex flex-row items-start justify-between p-4 pb-2">
+        <div className="flex items-center gap-2">
+          <div className="flex h-9 w-9 items-center justify-center rounded-md bg-green-500/10">
+            <svg className="h-5 w-5 text-green-600" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+            </svg>
+          </div>
+          <div>
+            <h3 className="text-sm font-medium">{channel.name}</h3>
+            <p className="text-xs text-muted-foreground">
+              {channel.identifier || "Sem número"}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-1">
+          {onEdit && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={onEdit}
+            >
+              <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                <path d="m15 5 4 4" />
+              </svg>
+            </Button>
+          )}
+          {onDelete && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 text-destructive hover:text-destructive"
+              onClick={onDelete}
+            >
+              <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M3 6h18" />
+                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+              </svg>
+            </Button>
+          )}
+          <WhatsappStatusBadge status={status} hasSession={hasSession} />
+        </div>
+      </div>
+      <div className="p-4 pt-0 space-y-3">
+        {linkedAgentName && (
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 8V4H8" />
+              <rect width="16" height="12" x="4" y="8" rx="2" />
+              <path d="M2 14h2" />
+              <path d="M20 14h2" />
+              <path d="M15 13v2" />
+              <path d="M9 13v2" />
+            </svg>
+            <span>Agent: <strong>{linkedAgentName}</strong></span>
+            {!linkedAgentActive && (
+              <span className="text-[10px] px-1 py-0 border rounded">inativo</span>
+            )}
+          </div>
+        )}
+        {actions}
+      </div>
+    </div>
+  );
+}

package/src/components/channel-create-dialog.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import type { GchatHookConfig } from "../hooks/types";
+import { useCreateChannel } from "../hooks/use-channels";
+import { WhatsappIcon } from "./whatsapp-icon";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+export interface ChannelCreateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config: GchatHookConfig;
+  renderAgentSelect?: (props: {
+    value: number | null;
+    onChange: (value: number | null) => void;
+    disabled?: boolean;
+  }) => ReactNode;
+}
+
+export function ChannelCreateDialog({
+  open,
+  onOpenChange,
+  config,
+  renderAgentSelect,
+}: ChannelCreateDialogProps) {
+  const createChannel = useCreateChannel(config);
+  const [name, setName] = useState("");
+  const [identifier, setIdentifier] = useState("");
+  const [idAgent, setIdAgent] = useState<number | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    try {
+      await createChannel.mutateAsync({
+        name: name.trim(),
+        type: "whatsapp_unofficial",
+        provider: "gwhatsmeow",
+        identifier: identifier.trim() || undefined,
+        id_agent: idAgent,
+      });
+      toast.success("Canal criado! Agora conecte via QR code.");
+      setName("");
+      setIdentifier("");
+      setIdAgent(null);
+      onOpenChange(false);
+    } catch {
+      toast.error("Erro ao criar canal");
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <WhatsappIcon className="h-5 w-5 text-green-600" />
+            Novo Canal WhatsApp
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="channel-name">Nome do canal *</Label>
+            <Input
+              id="channel-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Ex: WhatsApp Principal"
+              required
+              disabled={createChannel.isPending}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="channel-identifier">
+              Número do WhatsApp (opcional)
+            </Label>
+            <Input
+              id="channel-identifier"
+              value={identifier}
+              onChange={(e) => setIdentifier(e.target.value)}
+              placeholder="5511999999999"
+              disabled={createChannel.isPending}
+            />
+            <p className="text-xs text-muted-foreground">
+              Será detectado automaticamente ao escanear o QR code
+            </p>
+          </div>
+          {renderAgentSelect?.({
+            value: idAgent,
+            onChange: setIdAgent,
+            disabled: createChannel.isPending,
+          })}
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={createChannel.isPending}
+            >
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={createChannel.isPending || !name.trim()}>
+              {createChannel.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Criar Canal
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/channel-edit-dialog.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { ReactNode } from "react";
+import type { Channel } from "../types";
+import type { GchatHookConfig } from "../hooks/types";
+import { useUpdateChannel } from "../hooks/use-channels";
+import { WhatsappIcon } from "./whatsapp-icon";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+export interface ChannelEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  channel: Channel;
+  config: GchatHookConfig;
+  renderAgentSelect?: (props: {
+    value: number | null;
+    onChange: (value: number | null) => void;
+    disabled?: boolean;
+  }) => ReactNode;
+}
+
+export function ChannelEditDialog({
+  open,
+  onOpenChange,
+  channel,
+  config,
+  renderAgentSelect,
+}: ChannelEditDialogProps) {
+  const updateChannel = useUpdateChannel(config);
+  const [name, setName] = useState(channel.name);
+  const [identifier, setIdentifier] = useState(channel.identifier || "");
+  const [idAgent, setIdAgent] = useState<number | null>(channel.id_agent);
+
+  useEffect(() => {
+    if (open) {
+      setName(channel.name);
+      setIdentifier(channel.identifier || "");
+      setIdAgent(channel.id_agent);
+    }
+  }, [open, channel]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    try {
+      await updateChannel.mutateAsync({
+        id: channel.id,
+        body: {
+          name: name.trim(),
+          identifier: identifier.trim() || undefined,
+          id_agent: idAgent,
+        },
+      });
+      toast.success("Canal atualizado");
+      onOpenChange(false);
+    } catch {
+      toast.error("Erro ao atualizar canal");
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <WhatsappIcon className="h-5 w-5 text-green-600" />
+            Editar Canal
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="edit-channel-name">Nome do canal *</Label>
+            <Input
+              id="edit-channel-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Ex: WhatsApp Principal"
+              required
+              disabled={updateChannel.isPending}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="edit-channel-identifier">
+              Número do WhatsApp (opcional)
+            </Label>
+            <Input
+              id="edit-channel-identifier"
+              value={identifier}
+              onChange={(e) => setIdentifier(e.target.value)}
+              placeholder="5511999999999"
+              disabled={updateChannel.isPending}
+            />
+          </div>
+          {renderAgentSelect?.({
+            value: idAgent,
+            onChange: setIdAgent,
+            disabled: updateChannel.isPending,
+          })}
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={updateChannel.isPending}
+            >
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={updateChannel.isPending || !name.trim()}>
+              {updateChannel.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Salvar
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/channels-page.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import type { Channel } from "../types";
+import type { GchatHookConfig } from "../hooks/types";
+import { useChannels, useDisconnectChannel, useLogoutChannel, useDeleteChannel, useChannelWhatsappStatus } from "../hooks/use-channels";
+import { ChannelCard } from "./channel-card";
+import { ChannelCreateDialog } from "./channel-create-dialog";
+import { ChannelEditDialog } from "./channel-edit-dialog";
+import { WhatsappQrDialog } from "./whatsapp-qr-dialog";
+import { WhatsappIcon } from "./whatsapp-icon";
+import { Button } from "./ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { Skeleton } from "./ui/skeleton";
+import { Plus, QrCode, Unplug, LogOut } from "lucide-react";
+import { toast } from "sonner";
+
+export interface ChannelsPageProps {
+  config: GchatHookConfig;
+  renderAgentSelect?: (props: {
+    value: number | null;
+    onChange: (value: number | null) => void;
+    disabled?: boolean;
+  }) => ReactNode;
+  /** Optional: resolve agent info for a channel. Returns { name, active } */
+  getAgentInfo?: (idAgent: number | null) => { name: string; active: boolean } | null;
+}
+
+function ChannelCardWrapper({
+  channel,
+  config,
+  renderAgentSelect,
+  getAgentInfo,
+}: {
+  channel: Channel;
+  config: GchatHookConfig;
+  renderAgentSelect?: ChannelsPageProps["renderAgentSelect"];
+  getAgentInfo?: ChannelsPageProps["getAgentInfo"];
+}) {
+  const { data: status } = useChannelWhatsappStatus(config, channel.id);
+  const disconnectChannel = useDisconnectChannel(config);
+  const logoutChannel = useLogoutChannel(config);
+  const deleteChannel = useDeleteChannel(config);
+  const [qrOpen, setQrOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  const isFullyConnected = status?.connected === true && status?.logged_in === true;
+  const hasSession = !!channel.external_id;
+  const agentInfo = getAgentInfo?.(channel.id_agent);
+
+  function handleDisconnect() {
+    disconnectChannel.mutate(channel.id, {
+      onSuccess: () => toast.success("Canal desconectado"),
+      onError: () => toast.error("Erro ao desconectar"),
+    });
+  }
+
+  function handleLogout() {
+    logoutChannel.mutate(channel.id, {
+      onSuccess: () => toast.success("Logout realizado. Será necessário novo QR code."),
+      onError: () => toast.error("Erro ao fazer logout"),
+    });
+  }
+
+  function handleDelete() {
+    deleteChannel.mutate(channel.id, {
+      onSuccess: () => {
+        toast.success("Canal excluído");
+        setDeleteOpen(false);
+      },
+      onError: () => toast.error("Erro ao excluir canal"),
+    });
+  }
+
+  return (
+    <>
+      <ChannelCard
+        channel={channel}
+        config={config}
+        onEdit={() => setEditOpen(true)}
+        onDelete={() => setDeleteOpen(true)}
+        linkedAgentName={agentInfo?.name}
+        linkedAgentActive={agentInfo?.active !== false}
+        actions={
+          <div className="flex flex-wrap items-center gap-2">
+            {!isFullyConnected && (
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setQrOpen(true)}
+              >
+                <QrCode className="mr-1.5 h-3.5 w-3.5" />
+                Conectar via QR
+              </Button>
+            )}
+            {isFullyConnected && (
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleDisconnect}
+                disabled={disconnectChannel.isPending}
+              >
+                <Unplug className="mr-1.5 h-3.5 w-3.5" />
+                Desconectar
+              </Button>
+            )}
+            {hasSession && (
+              <Button
+                size="sm"
+                variant="outline"
+                className="text-destructive hover:text-destructive"
+                onClick={handleLogout}
+                disabled={logoutChannel.isPending}
+              >
+                <LogOut className="mr-1.5 h-3.5 w-3.5" />
+                Logout
+              </Button>
+            )}
+          </div>
+        }
+      />
+
+      <WhatsappQrDialog
+        open={qrOpen}
+        onOpenChange={setQrOpen}
+        channelId={channel.id}
+        config={config}
+      />
+
+      <ChannelEditDialog
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        channel={channel}
+        config={config}
+        renderAgentSelect={renderAgentSelect}
+      />
+
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir canal?</AlertDialogTitle>
+            <AlertDialogDescription>
+              O canal &quot;{channel.name}&quot; será removido permanentemente.
+              Todas as conversas associadas serão perdidas.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={handleDelete}
+            >
+              Excluir
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+export function ChannelsPage({
+  config,
+  renderAgentSelect,
+  getAgentInfo,
+}: ChannelsPageProps) {
+  const { data: channels, isLoading } = useChannels(config);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-6 p-4 flex-1 min-h-0 overflow-y-auto">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold">Canais</h1>
+          <p className="text-sm text-muted-foreground">
+            Gerencie seus canais de comunicação
+          </p>
+        </div>
+        <Button onClick={() => setCreateOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Novo Canal
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="rounded-lg border p-4 space-y-3">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-9 w-9 rounded-md" />
+                <div className="space-y-1">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-3 w-32" />
+                </div>
+              </div>
+              <Skeleton className="h-8 w-full" />
+            </div>
+          ))}
+        </div>
+      ) : !channels?.length ? (
+        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-3">
+          <WhatsappIcon className="h-12 w-12 opacity-20" />
+          <p className="text-sm">Nenhum canal configurado</p>
+          <Button variant="outline" onClick={() => setCreateOpen(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Criar primeiro canal
+          </Button>
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {channels.map((channel) => (
+            <ChannelCardWrapper
+              key={channel.id}
+              channel={channel}
+              config={config}
+              renderAgentSelect={renderAgentSelect}
+              getAgentInfo={getAgentInfo}
+            />
+          ))}
+        </div>
+      )}
+
+      <ChannelCreateDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        config={config}
+        renderAgentSelect={renderAgentSelect}
+      />
+    </div>
+  );
+}