Fix: Resolve import path error

The commit addresses a "Failed to resolve import" error in `src/pages/WhatsApp.tsx`. The error message indicates that the module `@/components/whatsapp` could not be found. This likely means the import path is incorrect, or the file does not exist at the specified location.

src/components/whatsapp/InstanceList.tsx

@@ -8,20 +8,20 @@ import { RefreshCw } from 'lucide-react';
 interface InstanceListProps {
   instances: WhatsAppInstance[];
   onViewQrCode: (instance: WhatsAppInstance) => void;
-  onDelete: (instanceId: string) => void;
-  onRestart: (instance: WhatsAppInstance) => Promise<void>;
-  onLogout: (instance: WhatsAppInstance) => Promise<void>;
+  onDeleteInstance: (instanceId: string) => void;
+  onRestartInstance: (instance: WhatsAppInstance) => Promise<void>;
+  onLogoutInstance: (instance: WhatsAppInstance) => Promise<void>;
   onSetPresence: (instance: WhatsAppInstance, presence: 'online' | 'offline') => Promise<void>;
-  onRefreshInstances: () => Promise<void>;
-  isRefreshing: boolean;
+  onRefreshInstances?: () => Promise<void>;
+  isRefreshing?: boolean;
 }
 
 const InstanceList = ({ 
   instances, 
   onViewQrCode, 
-  onDelete,
-  onRestart,
-  onLogout,
+  onDeleteInstance,
+  onRestartInstance,
+  onLogoutInstance,
   onSetPresence,
   onRefreshInstances,
   isRefreshing
@@ -43,15 +43,17 @@ const InstanceList = ({
     <div className="space-y-4">
       <div className="flex justify-between items-center">
         <h2 className="text-xl font-semibold">Instâncias Criadas</h2>
-        <Button 
-          variant="outline" 
-          size="sm"
-          onClick={onRefreshInstances}
-          disabled={isRefreshing}
-        >
-          <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
-          {isRefreshing ? 'Atualizando...' : 'Atualizar Lista'}
-        </Button>
+        {onRefreshInstances && (
+          <Button 
+            variant="outline" 
+            size="sm"
+            onClick={onRefreshInstances}
+            disabled={isRefreshing}
+          >
+            <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
+            {isRefreshing ? 'Atualizando...' : 'Atualizar Lista'}
+          </Button>
+        )}
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {instances.map((instance) => (
@@ -59,9 +61,9 @@ const InstanceList = ({
             key={instance.instanceId} 
             instance={instance} 
             onViewQrCode={onViewQrCode} 
-            onDelete={onDelete}
-            onRestart={onRestart}
-            onLogout={onLogout}
+            onDelete={onDeleteInstance}
+            onRestart={onRestartInstance}
+            onLogout={onLogoutInstance}
             onSetPresence={onSetPresence}
           />
         ))}

src/components/whatsapp/QrCodeDialog.tsx

@@ -1,5 +1,5 @@
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { 
   Dialog, 
   DialogContent, 
@@ -10,21 +10,22 @@ import {
 import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { RefreshCw } from 'lucide-react';
-import { WhatsAppInstance } from '@/types/whatsAppTypes';
 import { fetchQrCode } from '@/services/whatsAppService';
 import { useToast } from '@/hooks/use-toast';
 
 interface QrCodeDialogProps {
   open: boolean;
-  onOpenChange: (open: boolean) => void;
-  activeInstance: WhatsAppInstance | null;
-  onStatusCheck: () => void;
+  setOpen: (open: boolean) => void;
+  instanceName: string;
+  phoneNumber: string;
+  onStatusCheck?: () => void;
 }
 
 const QrCodeDialog = ({ 
   open, 
-  onOpenChange, 
-  activeInstance, 
+  setOpen, 
+  instanceName, 
+  phoneNumber,
   onStatusCheck 
 }: QrCodeDialogProps) => {
   const { toast } = useToast();
@@ -32,23 +33,30 @@ const QrCodeDialog = ({
   const [qrCodeData, setQrCodeData] = useState<string | null>(null);
   const [qrError, setQrError] = useState<string | null>(null);
 
+  // Load QR code when dialog opens
+  useEffect(() => {
+    if (open && instanceName) {
+      handleRefreshQrCode();
+    }
+  }, [open, instanceName]);
+
   const handleOpenChange = (newOpen: boolean) => {
-    onOpenChange(newOpen);
+    setOpen(newOpen);
     
     // After dialog closes, trigger status check to update connection state
-    if (!newOpen) {
+    if (!newOpen && onStatusCheck) {
       onStatusCheck();
     }
   };
 
   const handleRefreshQrCode = async () => {
-    if (!activeInstance) return;
+    if (!instanceName) return;
     
     setLoadingQR(true);
     setQrError(null);
 
     try {
-      const data = await fetchQrCode(activeInstance.instanceName);
+      const data = await fetchQrCode(instanceName);
       console.log('QR Code API response:', data);
 
       // Using the "base64" field from the response as the QR code data
@@ -75,7 +83,7 @@ const QrCodeDialog = ({
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>Conectar WhatsApp - {activeInstance?.instanceName}</DialogTitle>
+          <DialogTitle>Conectar WhatsApp - {instanceName}</DialogTitle>
           <DialogDescription>
             Escaneie o QR Code com seu WhatsApp para finalizar a conexão
           </DialogDescription>
@@ -109,7 +117,7 @@ const QrCodeDialog = ({
           )}
           
           <div className="flex space-x-2">
-            {activeInstance && (
+            {instanceName && (
               <Button 
                 variant="outline" 
                 onClick={handleRefreshQrCode} 
@@ -120,7 +128,7 @@ const QrCodeDialog = ({
                 Atualizar QR Code
               </Button>
             )}
-            <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            <Button variant="ghost" onClick={() => setOpen(false)}>
               Fechar
             </Button>
           </div>

src/components/whatsapp/index.ts

@@ -0,0 +1,7 @@
+
+// Export all WhatsApp components for easier imports
+export { default as CreateInstanceForm } from './CreateInstanceForm';
+export { default as InstanceList } from './InstanceList';
+export { default as InstanceStats } from './InstanceStats';
+export { default as QrCodeDialog } from './QrCodeDialog';
+export { default as InstanceCard } from './InstanceCard';

src/pages/WhatsApp.tsx

@@ -76,7 +76,7 @@ const WhatsApp = () => {
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div className="md:col-span-2">
-            <CreateInstanceForm userId={currentUserId} onInstanceCreated={addInstance} />
+            <CreateInstanceForm onInstanceCreated={addInstance} />
             <div className="mt-8">
               <InstanceList 
                 instances={instances}
@@ -99,6 +99,7 @@ const WhatsApp = () => {
             setOpen={setQrDialogOpen} 
             instanceName={activeInstance.instanceName}
             phoneNumber={activeInstance.phoneNumber}
+            onStatusCheck={checkAllInstancesStatus}
           />
         )}
       </div>