@greatapps/greatchat-ui 0.1.5 → 0.1.6

package/src/components/contacts-table.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { Contact } from "../types";
+import type { GchatHookConfig } from "../hooks/types";
+import { useContacts, useDeleteContact } from "../hooks/use-contacts";
+import { ContactFormDialog } from "./contact-form-dialog";
+import { DataTable } from "./data-table";
+import { Input } from "./ui/input";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "./ui/tooltip";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { Button } from "./ui/button";
+import { Pencil, Trash2, Search } from "lucide-react";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { toast } from "sonner";
+
+function useColumns(
+  onEdit: (contact: Contact) => void,
+  onDelete: (id: number) => void,
+): ColumnDef<Contact>[] {
+  return [
+    {
+      accessorKey: "name",
+      header: "Nome",
+      cell: ({ row }) => (
+        <span className="font-medium">{row.original.name}</span>
+      ),
+      sortingFn: (rowA, rowB) =>
+        rowA.original.name.toLowerCase().localeCompare(rowB.original.name.toLowerCase()),
+    },
+    {
+      accessorKey: "phone_number",
+      header: "Telefone",
+      cell: ({ row }) => row.original.phone_number || "—",
+      sortingFn: (rowA, rowB) => {
+        const a = rowA.original.phone_number || "";
+        const b = rowB.original.phone_number || "";
+        return a.localeCompare(b);
+      },
+    },
+    {
+      accessorKey: "identifier",
+      header: "Identificador",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-xs font-mono">
+          {row.original.identifier || "—"}
+        </span>
+      ),
+      sortingFn: (rowA, rowB) => {
+        const a = rowA.original.identifier || "";
+        const b = rowB.original.identifier || "";
+        return a.localeCompare(b);
+      },
+    },
+    {
+      accessorKey: "datetime_add",
+      header: "Criado em",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-sm">
+          {format(new Date(row.original.datetime_add), "dd/MM/yyyy", { locale: ptBR })}
+        </span>
+      ),
+    },
+    {
+      id: "actions",
+      size: 80,
+      enableSorting: false,
+      cell: ({ row }) => (
+        <div className="flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => onEdit(row.original)}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Editar</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive hover:text-destructive"
+                onClick={() => onDelete(row.original.id)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Excluir</TooltipContent>
+          </Tooltip>
+        </div>
+      ),
+    },
+  ];
+}
+
+export interface ContactsTableProps {
+  config: GchatHookConfig;
+}
+
+export function ContactsTable({ config }: ContactsTableProps) {
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(1);
+
+  const queryParams = useMemo(() => {
+    const params: Record<string, string> = {
+      limit: "15",
+      page: String(page),
+    };
+    if (search) {
+      params.search = search;
+    }
+    return params;
+  }, [search, page]);
+
+  const { data, isLoading } = useContacts(config, queryParams);
+  const deleteContact = useDeleteContact(config);
+  const [editContact, setEditContact] = useState<Contact | null>(null);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+
+  const contacts = data?.data || [];
+  const total = data?.total || 0;
+
+  const columns = useColumns(
+    (contact) => setEditContact(contact),
+    (id) => setDeleteId(id),
+  );
+
+  function handleDelete() {
+    if (!deleteId) return;
+    deleteContact.mutate(deleteId, {
+      onSuccess: () => {
+        toast.success("Contato excluído");
+        setDeleteId(null);
+      },
+      onError: () => toast.error("Erro ao excluir contato"),
+    });
+  }
+
+  function handleSearchChange(value: string) {
+    setSearch(value);
+    setPage(1);
+  }
+
+  return (
+    <>
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1 max-w-md">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Buscar por nome, telefone ou identificador..."
+            value={search}
+            onChange={(e) => handleSearchChange(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={contacts}
+        isLoading={isLoading}
+        emptyMessage="Nenhum contato encontrado"
+        total={total}
+        page={page}
+        onPageChange={setPage}
+        pageSize={15}
+      />
+
+      <ContactFormDialog
+        open={!!editContact}
+        onOpenChange={(open) => !open && setEditContact(null)}
+        contact={editContact ?? undefined}
+        config={config}
+      />
+
+      <AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir contato?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Esta ação não pode ser desfeita. O contato será removido permanentemente.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Excluir
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/src/components/data-table.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import {
+  type ColumnDef,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
+import { Button } from "./ui/button";
+import { Skeleton } from "./ui/skeleton";
+import { ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  isLoading?: boolean;
+  emptyMessage?: string;
+  total?: number;
+  page?: number;
+  onPageChange?: (page: number) => void;
+  pageSize?: number;
+  onRowClick?: (row: TData) => void;
+  selectedRowId?: string | number | null;
+  getRowId?: (row: TData) => string | number;
+  compact?: boolean;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  isLoading,
+  emptyMessage = "Nenhum registro encontrado",
+  total,
+  page = 1,
+  onPageChange,
+  pageSize = 15,
+  onRowClick,
+  selectedRowId,
+  getRowId,
+  compact,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    state: { sorting },
+  });
+
+  const totalPages = total ? Math.ceil(total / pageSize) : 1;
+  const showPagination = onPageChange && total && total > pageSize;
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead
+                    key={header.id}
+                    className={cn(compact && "py-1.5 text-xs")}
+                    style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}
+                  >
+                    {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                      <button
+                        type="button"
+                        className="flex items-center gap-1 hover:text-foreground -ml-1 px-1 py-0.5 rounded cursor-pointer select-none"
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        {{
+                          asc: <ArrowUp className="h-3.5 w-3.5" />,
+                          desc: <ArrowDown className="h-3.5 w-3.5" />,
+                        }[header.column.getIsSorted() as string] ?? (
+                          <ArrowUpDown className="h-3.5 w-3.5 text-muted-foreground/50" />
+                        )}
+                      </button>
+                    ) : (
+                      flexRender(header.column.columnDef.header, header.getContext())
+                    )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              Array.from({ length: compact ? 3 : 5 }).map((_, i) => (
+                <TableRow key={i}>
+                  {columns.map((_, j) => (
+                    <TableCell key={j} className={cn(compact && "py-1.5")}>
+                      <Skeleton className="h-4 w-full max-w-[120px]" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : table.getRowModel().rows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className={cn(
+                    "text-center text-muted-foreground",
+                    compact ? "py-4" : "py-8",
+                  )}
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            ) : (
+              table.getRowModel().rows.map((row) => {
+                const rowId = getRowId ? getRowId(row.original) : undefined;
+                const isSelected = selectedRowId != null && rowId != null && rowId === selectedRowId;
+
+                return (
+                  <TableRow
+                    key={row.id}
+                    className={cn(
+                      onRowClick && "cursor-pointer",
+                      isSelected && "bg-accent",
+                    )}
+                    onClick={() => onRowClick?.(row.original)}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id} className={cn(compact && "py-1.5")}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {showPagination && (
+        <div className="flex items-center justify-between px-2">
+          <p className="text-sm text-muted-foreground">
+            {total} registro{total !== 1 ? "s" : ""}
+          </p>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(page - 1)}
+              disabled={page <= 1}
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Anterior
+            </Button>
+            <span className="text-sm text-muted-foreground">
+              {page} de {totalPages}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(page + 1)}
+              disabled={page >= totalPages}
+            >
+              Próximo
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/inbox-page.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import type { Inbox, InboxMessage } from "../types";
+import type { GchatHookConfig } from "../hooks/types";
+import {
+  useInboxes,
+  useInboxStats,
+  useUpdateInbox,
+  useDeleteInbox,
+} from "../hooks/use-inboxes";
+import {
+  useInboxMessages,
+  useSendMessage,
+  useRetryMessage,
+  useRevokeMessage,
+  useEditMessage,
+} from "../hooks/use-inbox-messages";
+import { useGetContact } from "../hooks/use-contacts";
+import { InboxSidebar } from "./inbox-sidebar";
+import { ChatView } from "./chat-view";
+import { ContactInfoPanel } from "./contact-info-panel";
+import { Button } from "./ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { MessageCircle, User } from "lucide-react";
+
+export interface InboxPageProps {
+  config: GchatHookConfig;
+  filterChannelId?: number | null;
+}
+
+export function InboxPage({ config, filterChannelId }: InboxPageProps) {
+  const [selectedInbox, setSelectedInbox] = useState<Inbox | null>(null);
+  const [showContactPanel, setShowContactPanel] = useState(false);
+
+  const { data: inboxes, isLoading: inboxesLoading } = useInboxes(config);
+  const { data: messages = [], isLoading: messagesLoading } =
+    useInboxMessages(config, selectedInbox?.id ?? null);
+  const { data: contact, isLoading: contactLoading } = useGetContact(
+    config,
+    showContactPanel && selectedInbox?.id_contact
+      ? selectedInbox.id_contact
+      : null,
+  );
+
+  const sendMessage = useSendMessage(config);
+  const retryMessage = useRetryMessage(config);
+  const revokeMessage = useRevokeMessage(config);
+  const editMessage = useEditMessage(config);
+  const updateInbox = useUpdateInbox(config);
+  const deleteInbox = useDeleteInbox(config);
+
+  const handleSend = useCallback(
+    (content: string) => {
+      if (!selectedInbox) return;
+      sendMessage.mutate({ idInbox: selectedInbox.id, content });
+    },
+    [selectedInbox, sendMessage],
+  );
+
+  const handleStatusChange = useCallback(
+    (status: "open" | "pending" | "resolved") => {
+      if (!selectedInbox) return;
+      updateInbox.mutate({ id: selectedInbox.id, body: { status } });
+    },
+    [selectedInbox, updateInbox],
+  );
+
+  const handleRevoke = useCallback(
+    (message: InboxMessage) => {
+      if (!selectedInbox) return;
+      revokeMessage.mutate({ id: message.id, idInbox: selectedInbox.id });
+    },
+    [selectedInbox, revokeMessage],
+  );
+
+  const handleEdit = useCallback(
+    (message: InboxMessage, newContent: string) => {
+      if (!selectedInbox) return;
+      editMessage.mutate({
+        id: message.id,
+        idInbox: selectedInbox.id,
+        content: newContent,
+      });
+    },
+    [selectedInbox, editMessage],
+  );
+
+  return (
+    <div className="flex h-full">
+      <div className="w-[360px] shrink-0 border-r flex flex-col">
+        <InboxSidebar
+          inboxes={inboxes}
+          isLoading={inboxesLoading}
+          selectedInboxId={selectedInbox?.id ?? null}
+          onSelectInbox={(inbox) => {
+            setSelectedInbox(inbox);
+            setShowContactPanel(false);
+          }}
+          onDeleteInbox={(id) => deleteInbox.mutate(id)}
+          filterChannelId={filterChannelId}
+        />
+      </div>
+
+      <div className="flex-1 flex min-w-0">
+        {selectedInbox ? (
+          <>
+            <div className="flex-1 flex flex-col min-w-0">
+              <ChatView
+                messages={messages}
+                isLoading={messagesLoading}
+                onSend={handleSend}
+                onRetry={retryMessage}
+                onRevoke={handleRevoke}
+                onEdit={handleEdit}
+                renderHeader={
+                  <div className="flex items-center justify-between border-b px-4 py-3">
+                    <span className="text-sm font-medium">
+                      {selectedInbox.contact_name || "Conversa"}
+                    </span>
+                    <div className="flex items-center gap-2">
+                      <Select
+                        value={selectedInbox.status}
+                        onValueChange={handleStatusChange}
+                      >
+                        <SelectTrigger className="w-[130px] h-8 text-xs">
+                          <SelectValue placeholder="Status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="open">Aberta</SelectItem>
+                          <SelectItem value="pending">Pendente</SelectItem>
+                          <SelectItem value="resolved">Resolvida</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      {selectedInbox.id_contact && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                          onClick={() => setShowContactPanel((v) => !v)}
+                        >
+                          <User className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                }
+              />
+            </div>
+
+            {showContactPanel && selectedInbox.id_contact && (
+              <ContactInfoPanel
+                contact={contact ?? null}
+                isLoading={contactLoading}
+                onClose={() => setShowContactPanel(false)}
+              />
+            )}
+          </>
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-3">
+            <MessageCircle className="h-12 w-12 opacity-20" />
+            <p className="text-sm">Selecione uma conversa para começar</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/card.tsx

@@ -0,0 +1,94 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn("ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }