@greatapps/greatchat-ui 0.1.4 → 0.1.6

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 }

package/src/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-muted h-1.5 rounded-full relative flex w-full items-center overflow-x-hidden",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary size-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

package/src/components/ui/table.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/whatsapp-icon.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+
+export function WhatsappIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" />
+      <path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" />
+    </svg>
+  );
+}

package/src/components/whatsapp-qr-dialog.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import type { GchatHookConfig } from "../hooks/types";
+import { useConnectChannel, useChannelQR, useChannelWhatsappStatus } from "../hooks/use-channels";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Loader2, Check, AlertCircle, RefreshCw } from "lucide-react";
+import { toast } from "sonner";
+
+type QRState = "connecting" | "waiting_qr" | "showing_qr" | "connected" | "error";
+
+export interface WhatsappQrDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  channelId: number;
+  config: GchatHookConfig;
+}
+
+export function WhatsappQrDialog({
+  open,
+  onOpenChange,
+  channelId,
+  config,
+}: WhatsappQrDialogProps) {
+  const connectChannel = useConnectChannel(config);
+  const [state, setState] = useState<QRState>("connecting");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const { data: qrUrl } = useChannelQR(
+    config,
+    channelId,
+    open && (state === "waiting_qr" || state === "showing_qr"),
+  );
+
+  const { data: status } = useChannelWhatsappStatus(
+    config,
+    channelId,
+    open && state !== "connected",
+  );
+
+  const startConnect = useCallback(() => {
+    setState("connecting");
+    setErrorMsg("");
+    connectChannel.mutate(channelId, {
+      onSuccess: () => setState("waiting_qr"),
+      onError: (err) => {
+        setState("error");
+        setErrorMsg(err.message || "Erro ao conectar");
+      },
+    });
+  }, [channelId, connectChannel]);
+
+  useEffect(() => {
+    if (!open) {
+      setState("connecting");
+      setErrorMsg("");
+      return;
+    }
+    startConnect();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, channelId]);
+
+  useEffect(() => {
+    if (qrUrl && (state === "waiting_qr" || state === "showing_qr")) {
+      setState("showing_qr");
+    }
+  }, [qrUrl, state]);
+
+  useEffect(() => {
+    if (status?.connected && status?.logged_in) {
+      setState("connected");
+      toast.success("WhatsApp conectado com sucesso!");
+      setTimeout(() => onOpenChange(false), 1500);
+    }
+  }, [status, onOpenChange]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Conectar WhatsApp</DialogTitle>
+          <DialogDescription>
+            Escaneie o QR code com seu WhatsApp para conectar
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex min-h-[300px] items-center justify-center">
+          {state === "connecting" && (
+            <div className="flex flex-col items-center gap-3 text-muted-foreground">
+              <Loader2 className="h-8 w-8 animate-spin" />
+              <p className="text-sm">Iniciando conexão...</p>
+            </div>
+          )}
+
+          {state === "waiting_qr" && (
+            <div className="flex flex-col items-center gap-3 text-muted-foreground">
+              <Loader2 className="h-8 w-8 animate-spin" />
+              <p className="text-sm">Gerando QR code...</p>
+            </div>
+          )}
+
+          {state === "showing_qr" && qrUrl && (
+            <div className="flex flex-col items-center gap-3">
+              <img
+                src={qrUrl}
+                alt="QR Code WhatsApp"
+                className="h-64 w-64 rounded-lg border"
+              />
+              <p className="text-sm text-muted-foreground">
+                Abra o WhatsApp &gt; Aparelhos conectados &gt; Conectar
+              </p>
+            </div>
+          )}
+
+          {state === "connected" && (
+            <div className="flex flex-col items-center gap-3 text-green-600">
+              <Check className="h-12 w-12" />
+              <p className="text-lg font-medium">Conectado!</p>
+            </div>
+          )}
+
+          {state === "error" && (
+            <div className="flex flex-col items-center gap-3 text-destructive">
+              <AlertCircle className="h-8 w-8" />
+              <p className="text-sm">{errorMsg || "Erro ao gerar QR code"}</p>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={startConnect}
+              >
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Tentar novamente
+              </Button>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/whatsapp-status-badge.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import type { WhatsappStatus } from "../types";
+import { Badge } from "./ui/badge";
+
+export interface WhatsappStatusBadgeProps {
+  status: WhatsappStatus | undefined | null;
+  hasSession: boolean;
+}
+
+export function WhatsappStatusBadge({
+  status,
+  hasSession,
+}: WhatsappStatusBadgeProps) {
+  if (!hasSession) {
+    return (
+      <Badge variant="outline" className="text-xs text-zinc-500 border-zinc-300">
+        Sem sessão
+      </Badge>
+    );
+  }
+
+  if (!status) {
+    return (
+      <Badge variant="outline" className="text-xs text-zinc-500 border-zinc-300">
+        Verificando...
+      </Badge>
+    );
+  }
+
+  if (status.connected && status.logged_in) {
+    return (
+      <Badge
+        variant="outline"
+        className="text-xs bg-green-500/10 text-green-600 border-green-200"
+      >
+        Conectado
+      </Badge>
+    );
+  }
+
+  if (status.connected && !status.logged_in) {
+    return (
+      <Badge
+        variant="outline"
+        className="text-xs bg-yellow-500/10 text-yellow-600 border-yellow-200"
+      >
+        Reconectando...
+      </Badge>
+    );
+  }
+
+  if (status.logged_in && !status.connected) {
+    return (
+      <Badge
+        variant="outline"
+        className="text-xs bg-yellow-500/10 text-yellow-600 border-yellow-200"
+      >
+        Desconectado
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge
+      variant="outline"
+      className="text-xs bg-red-500/10 text-red-600 border-red-200"
+    >
+      Offline
+    </Badge>
+  );
+}

package/src/index.ts

@@ -21,7 +21,7 @@ export { groupMessagesByDate, formatDateGroup, formatMessageTime } from "./utils
 // Hooks
 export * from "./hooks";
 
-// Components
+// Base Components
 export {
   ChatView,
   ChatInput,
@@ -31,6 +31,8 @@ export {
   InboxSidebar,
   ContactInfoPanel,
   NewConversationDialog,
+  ChannelCard,
+  WhatsappStatusBadge,
 } from "./components";
 export type {
   ChatViewProps,
@@ -41,4 +43,41 @@ export type {
   InboxSidebarProps,
   ContactInfoPanelProps,
   NewConversationDialogProps,
+  ChannelCardProps,
+  WhatsappStatusBadgeProps,
 } from "./components";
+
+// Icons
+export { WhatsappIcon } from "./components/whatsapp-icon";
+
+// Dialogs & Forms
+export { WhatsappQrDialog } from "./components/whatsapp-qr-dialog";
+export type { WhatsappQrDialogProps } from "./components/whatsapp-qr-dialog";
+
+export { ChannelCreateDialog } from "./components/channel-create-dialog";
+export type { ChannelCreateDialogProps } from "./components/channel-create-dialog";
+
+export { ChannelEditDialog } from "./components/channel-edit-dialog";
+export type { ChannelEditDialogProps } from "./components/channel-edit-dialog";
+
+export { ContactFormDialog } from "./components/contact-form-dialog";
+export type { ContactFormDialogProps } from "./components/contact-form-dialog";
+
+export { ContactsTable } from "./components/contacts-table";
+export type { ContactsTableProps } from "./components/contacts-table";
+
+export { DataTable } from "./components/data-table";
+export type { DataTableProps } from "./components/data-table";
+
+// Page Compositions
+export { InboxPage } from "./components/inbox-page";
+export type { InboxPageProps } from "./components/inbox-page";
+
+export { ChannelsPage } from "./components/channels-page";
+export type { ChannelsPageProps } from "./components/channels-page";
+
+export { ContactsPage } from "./components/contacts-page";
+export type { ContactsPageProps } from "./components/contacts-page";
+
+export { ChatDashboard } from "./components/chat-dashboard";
+export type { ChatDashboardProps } from "./components/chat-dashboard";