@greatapps/greatchat-ui 0.1.5 → 0.2.0

package/src/components/chat-dashboard.tsx

@@ -0,0 +1,433 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import type { ReactNode } from "react";
+import type { Inbox, Channel } from "../types";
+import type { GchatHookConfig } from "../hooks/types";
+import { useInboxStats, useInboxes } from "../hooks/use-inboxes";
+import { useChannels, useChannelWhatsappStatus } from "../hooks/use-channels";
+import { ContactAvatar } from "./contact-avatar";
+import { WhatsappStatusBadge } from "./whatsapp-status-badge";
+import { WhatsappIcon } from "./whatsapp-icon";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Badge,
+  Progress,
+  Skeleton,
+  cn,
+} from "@greatapps/greatauth-ui/ui";
+import {
+  Inbox as InboxIcon,
+  MessageCircle,
+  Clock,
+  CircleCheck,
+  ArrowRight,
+} from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
+// --- Helpers ---
+
+function getGreeting(userName?: string): string {
+  const hour = new Date().getHours();
+  const prefix = hour < 12 ? "Bom dia" : hour < 18 ? "Boa tarde" : "Boa noite";
+  return userName ? `${prefix}, ${userName}!` : `${prefix}!`;
+}
+
+const statusColors: Record<string, string> = {
+  open: "bg-green-500/10 text-green-600 border-green-200",
+  pending: "bg-yellow-500/10 text-yellow-600 border-yellow-200",
+  resolved: "bg-zinc-500/10 text-zinc-500 border-zinc-200",
+};
+
+const statusLabels: Record<string, string> = {
+  open: "Aberta",
+  pending: "Pendente",
+  resolved: "Resolvida",
+};
+
+// --- Sub-components ---
+
+function StatCard({
+  title,
+  value,
+  total,
+  icon: Icon,
+  loading,
+  accentColor,
+  onClick,
+}: {
+  title: string;
+  value: number | undefined;
+  total: number | undefined;
+  icon: React.ElementType;
+  loading: boolean;
+  accentColor: string;
+  onClick: () => void;
+}) {
+  const pct = total && value ? Math.round((value / total) * 100) : 0;
+
+  return (
+    <Card
+      className={cn("cursor-pointer transition-shadow hover:shadow-md border-l-4", accentColor)}
+      onClick={onClick}
+    >
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+        <Icon className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {loading ? (
+          <Skeleton className="h-8 w-16" />
+        ) : (
+          <>
+            <div className="flex items-baseline gap-2">
+              <p className="text-2xl font-bold">{value ?? 0}</p>
+              {total !== undefined && total > 0 && title !== "Total" && (
+                <span className="text-xs text-muted-foreground">
+                  de {total}
+                </span>
+              )}
+            </div>
+            {title !== "Total" && (
+              <Progress value={pct} className="h-1" />
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function ChannelHealthCard({
+  channel,
+  config,
+  onClick,
+}: {
+  channel: Channel;
+  config: GchatHookConfig;
+  onClick: () => void;
+}) {
+  const { data: status } = useChannelWhatsappStatus(config, channel.id);
+
+  return (
+    <div
+      className="flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors hover:bg-accent"
+      onClick={onClick}
+    >
+      <div className="flex h-9 w-9 items-center justify-center rounded-md bg-green-500/10">
+        <WhatsappIcon className="h-5 w-5 text-green-600" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{channel.name}</p>
+        <p className="text-xs text-muted-foreground truncate">
+          {channel.identifier || "Sem número"}
+        </p>
+      </div>
+      <WhatsappStatusBadge status={status} hasSession={!!channel.external_id} />
+    </div>
+  );
+}
+
+function RecentConversationItem({
+  inbox,
+  onClick,
+}: {
+  inbox: Inbox;
+  onClick: () => void;
+}) {
+  const timestamp = inbox.last_message_at || inbox.datetime_add;
+  const timeAgo = formatDistanceToNow(new Date(timestamp), {
+    addSuffix: true,
+    locale: ptBR,
+  });
+
+  const lastMessage =
+    inbox.last_message_content_type === "text"
+      ? inbox.last_message_content
+      : inbox.last_message_content_type
+        ? `[${inbox.last_message_content_type}]`
+        : null;
+
+  const directionPrefix =
+    inbox.last_message_direction === "outbound" ? "Você: " : "";
+
+  return (
+    <div
+      className="flex items-center gap-3 rounded-lg p-3 cursor-pointer transition-colors hover:bg-accent"
+      onClick={onClick}
+    >
+      <ContactAvatar name={inbox.contact_name || "?"} className="h-9 w-9" />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="text-sm font-medium truncate">
+              {inbox.contact_name || "Desconhecido"}
+            </span>
+            {inbox.channel_name && (
+              <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0 text-muted-foreground">
+                {inbox.channel_name}
+              </Badge>
+            )}
+          </div>
+          <span className="text-xs text-muted-foreground shrink-0">
+            {timeAgo}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-2 mt-0.5">
+          <p className="text-xs text-muted-foreground truncate">
+            {lastMessage ? `${directionPrefix}${lastMessage}` : "Sem mensagens"}
+          </p>
+          <Badge
+            variant="outline"
+            className={cn("shrink-0 text-[10px] px-1.5 py-0", statusColors[inbox.status])}
+          >
+            {statusLabels[inbox.status] || inbox.status}
+          </Badge>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// --- Main Component ---
+
+export interface ChatDashboardProps {
+  config: GchatHookConfig;
+  userName?: string;
+  onNavigateToInbox?: (filters?: { status?: string; channelId?: number }) => void;
+  onNavigateToChannels?: () => void;
+  renderExtraSection?: () => ReactNode;
+}
+
+export function ChatDashboard({
+  config,
+  userName,
+  onNavigateToInbox,
+  onNavigateToChannels,
+  renderExtraSection,
+}: ChatDashboardProps) {
+  const [selectedChannelId, setSelectedChannelId] = useState<number | null>(null);
+
+  const { data: stats, isLoading: statsLoading } = useInboxStats(config);
+  const { data: inboxes, isLoading: inboxesLoading } = useInboxes(config);
+  const { data: channels, isLoading: channelsLoading } = useChannels(config);
+
+  const filteredInboxes = useMemo(() => {
+    if (!inboxes) return [];
+    if (!selectedChannelId) return inboxes;
+    return inboxes.filter((i) => i.id_channel === selectedChannelId);
+  }, [inboxes, selectedChannelId]);
+
+  const filteredStats = useMemo(() => {
+    if (!selectedChannelId) return stats;
+    const open = filteredInboxes.filter((i) => i.status === "open").length;
+    const pending = filteredInboxes.filter((i) => i.status === "pending").length;
+    const resolved = filteredInboxes.filter((i) => i.status === "resolved").length;
+    return { total: filteredInboxes.length, open, pending, resolved };
+  }, [stats, filteredInboxes, selectedChannelId]);
+
+  const recentInboxes = useMemo(() => {
+    return [...filteredInboxes]
+      .sort((a, b) => {
+        const da = a.last_message_at || a.datetime_add;
+        const db = b.last_message_at || b.datetime_add;
+        return new Date(db).getTime() - new Date(da).getTime();
+      })
+      .slice(0, 5);
+  }, [filteredInboxes]);
+
+  return (
+    <div className="flex flex-col gap-6 p-4 flex-1 min-h-0 overflow-y-auto">
+      {/* Greeting */}
+      <div>
+        <h1 className="text-xl font-semibold">
+          {getGreeting(userName)}
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          Aqui está o resumo das suas conversas e canais.
+        </p>
+      </div>
+
+      {/* Channel Filter */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <button
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+            !selectedChannelId
+              ? "bg-primary text-primary-foreground border-primary"
+              : "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          )}
+          onClick={() => setSelectedChannelId(null)}
+        >
+          Todos os canais
+        </button>
+        {channelsLoading ? (
+          <>
+            <Skeleton className="h-7 w-24 rounded-full" />
+            <Skeleton className="h-7 w-28 rounded-full" />
+          </>
+        ) : (
+          channels?.map((channel) => (
+            <button
+              key={channel.id}
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+                selectedChannelId === channel.id
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+              )}
+              onClick={() => setSelectedChannelId(channel.id)}
+            >
+              <WhatsappIcon className="h-3 w-3" />
+              {channel.name}
+            </button>
+          ))
+        )}
+      </div>
+
+      {/* Stat Cards */}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          title="Total"
+          value={filteredStats?.total}
+          total={filteredStats?.total}
+          icon={InboxIcon}
+          loading={statsLoading && !selectedChannelId}
+          accentColor="border-l-blue-500"
+          onClick={() => onNavigateToInbox?.()}
+        />
+        <StatCard
+          title="Abertas"
+          value={filteredStats?.open}
+          total={filteredStats?.total}
+          icon={MessageCircle}
+          loading={statsLoading && !selectedChannelId}
+          accentColor="border-l-green-500"
+          onClick={() => onNavigateToInbox?.({ status: "open" })}
+        />
+        <StatCard
+          title="Pendentes"
+          value={filteredStats?.pending}
+          total={filteredStats?.total}
+          icon={Clock}
+          loading={statsLoading && !selectedChannelId}
+          accentColor="border-l-yellow-500"
+          onClick={() => onNavigateToInbox?.({ status: "pending" })}
+        />
+        <StatCard
+          title="Resolvidas"
+          value={filteredStats?.resolved}
+          total={filteredStats?.total}
+          icon={CircleCheck}
+          loading={statsLoading && !selectedChannelId}
+          accentColor="border-l-zinc-400"
+          onClick={() => onNavigateToInbox?.({ status: "resolved" })}
+        />
+      </div>
+
+      {/* Channel Health */}
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle className="text-sm font-medium">
+            Saúde dos Canais
+          </CardTitle>
+          {onNavigateToChannels && (
+            <button
+              onClick={onNavigateToChannels}
+              className="text-xs text-primary hover:underline flex items-center gap-1"
+            >
+              Gerenciar
+              <ArrowRight className="h-3 w-3" />
+            </button>
+          )}
+        </CardHeader>
+        <CardContent>
+          {channelsLoading ? (
+            <div className="space-y-3">
+              {[1, 2].map((i) => (
+                <div key={i} className="flex items-center gap-3 p-3">
+                  <Skeleton className="h-8 w-8 rounded" />
+                  <div className="flex-1 space-y-1">
+                    <Skeleton className="h-4 w-24" />
+                    <Skeleton className="h-3 w-32" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : !channels?.length ? (
+            <div className="flex items-center justify-center h-full text-sm text-muted-foreground py-8">
+              Nenhum canal configurado
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {channels.map((channel) => (
+                <ChannelHealthCard
+                  key={channel.id}
+                  channel={channel}
+                  config={config}
+                  onClick={() => onNavigateToInbox?.({ channelId: channel.id })}
+                />
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Extra Section (e.g., MetaAgents in admin) */}
+      {renderExtraSection?.()}
+
+      {/* Recent Conversations */}
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle className="text-sm font-medium">
+            Conversas Recentes
+          </CardTitle>
+          {onNavigateToInbox && (
+            <button
+              onClick={() => onNavigateToInbox()}
+              className="text-xs text-primary hover:underline flex items-center gap-1"
+            >
+              Ver todas
+              <ArrowRight className="h-3 w-3" />
+            </button>
+          )}
+        </CardHeader>
+        <CardContent className="p-0">
+          {inboxesLoading ? (
+            <div className="space-y-2 p-4">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="flex items-center gap-3 p-3">
+                  <Skeleton className="h-9 w-9 rounded-full shrink-0" />
+                  <div className="flex-1 space-y-1.5">
+                    <Skeleton className="h-4 w-28" />
+                    <Skeleton className="h-3 w-40" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : recentInboxes.length === 0 ? (
+            <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+              Nenhuma conversa encontrada
+            </div>
+          ) : (
+            <div className="divide-y">
+              {recentInboxes.map((inbox) => (
+                <RecentConversationItem
+                  key={inbox.id}
+                  inbox={inbox}
+                  onClick={() => onNavigateToInbox?.()}
+                />
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/chat-input.tsx

@@ -1,7 +1,6 @@
 import { useState, useRef } from "react";
 import { Send } from "lucide-react";
-import { Button } from "./ui/button";
-import { Textarea } from "./ui/textarea";
+import { Button, Textarea } from "@greatapps/greatauth-ui/ui";
 
 export interface ChatInputProps {
   onSend: (content: string) => void;

package/src/components/chat-view.tsx

@@ -4,14 +4,7 @@ import { groupMessagesByDate } from "../utils/group-messages";
 import { formatDateGroup } from "../utils/format-date";
 import { MessageBubble } from "./message-bubble";
 import { ChatInput } from "./chat-input";
-import { Skeleton } from "./ui/skeleton";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
+import { Skeleton, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@greatapps/greatauth-ui/ui";
 
 export interface ChatViewProps {
   messages: InboxMessage[];

package/src/components/contact-avatar.tsx

@@ -1,5 +1,4 @@
-import { Avatar, AvatarFallback } from "./ui/avatar";
-import { cn } from "../lib/utils";
+import { Avatar, AvatarFallback, cn } from "@greatapps/greatauth-ui/ui";
 
 const COLORS = [
   "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",

package/src/components/contact-form-dialog.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { Contact } from "../types";
+import type { GchatHookConfig } from "../hooks/types";
+import { useCreateContact, useUpdateContact } from "../hooks/use-contacts";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Button,
+  Input,
+  Label,
+} from "@greatapps/greatauth-ui/ui";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+export interface ContactFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  contact?: Contact;
+  config: GchatHookConfig;
+}
+
+export function ContactFormDialog({
+  open,
+  onOpenChange,
+  contact,
+  config,
+}: ContactFormDialogProps) {
+  const isEditing = !!contact;
+  const createContact = useCreateContact(config);
+  const updateContact = useUpdateContact(config);
+
+  const [name, setName] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [identifier, setIdentifier] = useState("");
+
+  useEffect(() => {
+    if (contact) {
+      setName(contact.name);
+      setPhoneNumber(contact.phone_number || "");
+      setIdentifier(contact.identifier || "");
+    } else {
+      setName("");
+      setPhoneNumber("");
+      setIdentifier("");
+    }
+  }, [contact, open]);
+
+  const isPending = createContact.isPending || updateContact.isPending;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    const body = {
+      name: name.trim(),
+      phone_number: phoneNumber.trim() || undefined,
+      identifier: identifier.trim() || undefined,
+    };
+
+    try {
+      if (isEditing) {
+        await updateContact.mutateAsync({ id: contact.id, body });
+        toast.success("Contato atualizado");
+      } else {
+        await createContact.mutateAsync(body);
+        toast.success("Contato criado");
+      }
+      onOpenChange(false);
+    } catch {
+      toast.error(isEditing ? "Erro ao atualizar" : "Erro ao criar contato");
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isEditing ? "Editar Contato" : "Novo Contato"}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="contact-name">Nome *</Label>
+            <Input
+              id="contact-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Nome do contato"
+              required
+              disabled={isPending}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="contact-phone">Telefone</Label>
+            <Input
+              id="contact-phone"
+              value={phoneNumber}
+              onChange={(e) => setPhoneNumber(e.target.value)}
+              placeholder="5511999999999"
+              disabled={isPending}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="contact-identifier">Identificador (WhatsApp ID)</Label>
+            <Input
+              id="contact-identifier"
+              value={identifier}
+              onChange={(e) => setIdentifier(e.target.value)}
+              placeholder="5511999999999@s.whatsapp.net"
+              disabled={isPending}
+            />
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isPending}
+            >
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={isPending || !name.trim()}>
+              {isPending ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : null}
+              {isEditing ? "Salvar" : "Criar"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/contact-info-panel.tsx

@@ -1,8 +1,6 @@
 import type { Contact } from "../types";
 import { ContactAvatar } from "./contact-avatar";
-import { Button } from "./ui/button";
-import { Skeleton } from "./ui/skeleton";
-import { Separator } from "./ui/separator";
+import { Button, Skeleton, Separator, cn } from "@greatapps/greatauth-ui/ui";
 import {
   X,
   Phone,
@@ -13,7 +11,6 @@ import {
 } from "lucide-react";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
-import { cn } from "../lib/utils";
 
 function InfoRow({
   icon: Icon,

package/src/components/contacts-page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import type { GchatHookConfig } from "../hooks/types";
+import { ContactsTable } from "./contacts-table";
+import { ContactFormDialog } from "./contact-form-dialog";
+import { Button } from "@greatapps/greatauth-ui/ui";
+import { Plus } from "lucide-react";
+
+export interface ContactsPageProps {
+  config: GchatHookConfig;
+}
+
+export function ContactsPage({ config }: ContactsPageProps) {
+  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">Contatos</h1>
+          <p className="text-sm text-muted-foreground">
+            Gerencie seus contatos de conversas
+          </p>
+        </div>
+        <Button onClick={() => setCreateOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Novo Contato
+        </Button>
+      </div>
+
+      <ContactsTable config={config} />
+
+      <ContactFormDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        config={config}
+      />
+    </div>
+  );
+}