Resolvidos conflitos após merge

Author: luiis716

src/components/sidebar.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import Menus from "./constants/menus";
+<<<<<<< HEAD
 
 type SidebarProps = {
   instanceId: string;
@@ -12,6 +13,19 @@ function Sidebar({ instanceId }: SidebarProps) {
     if (!path) return;
 
     navigate(`/instance/${instanceId}/${path}`);
+=======
+import { useInstance } from "@/contexts/InstanceContext";
+
+function Sidebar() {
+  const navigate = useNavigate();
+
+  const { instance } = useInstance();
+
+  const handleNavigate = (path?: string) => {
+    if (!path || !instance) return;
+
+    navigate(`/instance/${instance.id}/${path}`);
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
   };
 
   return (

src/contexts/InstanceContext.tsx

@@ -0,0 +1,56 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+import { useParams } from "react-router-dom";
+import { Instance } from "@/types/evolution.types";
+import { fetchInstance } from "@/services/instances.service";
+
+interface InstanceContextProps {
+  instance: Instance | null;
+}
+
+export const InstanceContext = createContext<InstanceContextProps | null>(null);
+
+export const useInstance = () => {
+  const context = useContext(InstanceContext);
+  if (!context) {
+    throw new Error("useInstance must be used within an InstanceProvider");
+  }
+  return context;
+};
+
+interface InstanceProviderProps {
+  children: ReactNode;
+}
+
+export const InstanceProvider: React.FC<InstanceProviderProps> = ({
+  children,
+}): React.ReactNode => {
+  const { instanceId } = useParams<{ instanceId: string }>();
+  const [instance, setInstance] = useState<Instance | null>(null);
+
+  useEffect(() => {
+    const fetchData = async (instanceId: string) => {
+      try {
+        const data = await fetchInstance(instanceId);
+        setInstance(data[0] || null);
+      } catch (error) {
+        console.error("Erro ao buscar dados:", error);
+      }
+    };
+
+    if (instanceId) {
+      fetchData(instanceId);
+    }
+  }, [instanceId]);
+
+  return (
+    <InstanceContext.Provider value={{ instance }}>
+      {children}
+    </InstanceContext.Provider>
+  );
+};

src/layout/InstanceLayout.tsx

@@ -1,37 +1,62 @@
+<<<<<<< HEAD
 import "./instance-layout.css";
 
 import React from "react";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
 import { useParams } from "react-router-dom";
+=======
+// InstanceLayout.tsx
+import "./instance-layout.css";
+import React from "react";
+import { Header } from "@/components/header";
+import { Sidebar } from "@/components/sidebar";
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
+<<<<<<< HEAD
+=======
+import { InstanceProvider } from "@/contexts/InstanceContext";
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
 function InstanceLayout({ children }: LayoutProps) {
+<<<<<<< HEAD
   const { instanceId } = useParams<{ instanceId: string }>();
 
   return (
     <>
+=======
+  return (
+    <InstanceProvider>
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
       <Header perfil={true} />
       <div className="layout-general">
         <div className="instance-layout">
           <ResizablePanelGroup direction="horizontal">
             <ResizablePanel defaultSize={15}>
+<<<<<<< HEAD
               <Sidebar instanceId={`${instanceId}`} />
+=======
+              <Sidebar />
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
             </ResizablePanel>
             <ResizableHandle withHandle className="border border-black" />
             <ResizablePanel>{children}</ResizablePanel>
           </ResizablePanelGroup>
         </div>
       </div>
+<<<<<<< HEAD
     </>
+=======
+    </InstanceProvider>
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
   );
 }
 

src/pages/Dashboard/index.tsx

@@ -19,6 +19,10 @@ import { useNavigate } from "react-router-dom";
 const fetchData = async (callback: (data: Instance[]) => void) => {
   try {
     const data = await fetchInstances();
+<<<<<<< HEAD
+=======
+
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
     callback(data);
   } catch (error) {
     console.error("Erro ao buscar dados:", error);
@@ -35,9 +39,17 @@ function Dashboard() {
     setDropdownOpen(!dropdownOpen);
   };
 
+<<<<<<< HEAD
   const handleInstance = (instanceName: string) => {
     navigate(`/instance/${instanceName}/dashboard`);
   };
+=======
+  const handleInstance =
+    (instanceId: string): (() => void) =>
+    () => {
+      navigate(`/instance/${instanceId}/dashboard`);
+    };
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
 
   useEffect(() => {
     const getData = async () => {
@@ -124,7 +136,11 @@ function Dashboard() {
                 <span>{instance.token}</span>
                 <Copy className="card-icon" size="15" />
               </div>
+<<<<<<< HEAD
               <div className="card-menu" onClick={() => handleInstance(instance.name)}>
+=======
+              <div className="card-menu" onClick={handleInstance(instance.id)}>
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
                 <Cog className="card-icon" size="20" />
               </div>
             </div>

src/pages/instance/DashboardInstance/index.tsx

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import { useEffect, useState, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import "./style.css";
@@ -186,6 +187,66 @@ function DashboardInstance() {
             </Button>
           </div>
         </div>
+=======
+import { Button } from "@/components/ui/button";
+import "./style.css";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useInstance } from "@/contexts/InstanceContext";
+
+function DashboardInstance() {
+  const { instance } = useInstance();
+
+  const renderStatus = (status: string | undefined) => {
+    switch (status) {
+      case "open":
+        return (
+          <div className="dashboard-status">
+            <i className="status-icon connected"></i>
+            <span className="status-text">CONECTADO</span>
+          </div>
+        );
+      case "connecting":
+        return (
+          <div className="dashboard-status">
+            <i className="status-icon connecting"></i>
+            <span className="status-text">CONECTANDO</span>
+          </div>
+        );
+      case "closed":
+        return (
+          <div className="dashboard-status">
+            <i className="status-icon disconnected"></i>
+            <span className="status-text">DESCONECTADO</span>
+          </div>
+        );
+      default:
+        return (
+          <div className="dashboard-status">
+            <i className="status-icon disconnected"></i>
+            <span className="status-text">DESCONECTADO</span>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <>
+      <main className="dashboard-instance">
+        <div className="dashboard-card">
+          <div className="dashboard-info">
+            {renderStatus(instance?.connectionStatus)}
+            <div className="dashboard-name">{instance?.name}</div>
+          </div>
+          <div className="dashboard-actions">
+            <Button className="action-button">REINICIAR</Button>
+            <Button className="action-button disabled">DESCONECTAR</Button>
+          </div>
+        </div>
+        <div className="connection-warning">
+          <span>Telefone não conectado</span>
+          <Button className="connect-button">CONECTAR</Button>
+        </div>
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
       </main>
       <main className="instance-cards">
         <Card className="instance-card">
@@ -207,9 +268,12 @@ function DashboardInstance() {
           <CardContent>0</CardContent>
         </Card>
       </main>
+<<<<<<< HEAD
       {showQRCode && (
         <QRCodePopup qrCodeData={qrCodeData} onClose={closeQRCodePopup} />
       )}
+=======
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
     </>
   );
 }

src/pages/instance/DashboardInstance/style.css

@@ -31,7 +31,10 @@
     margin-right: 10px;
 }
 
+<<<<<<< HEAD
 
+=======
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
 .status-icon.disconnected {
     background-color: red;
 }
@@ -85,16 +88,25 @@
     padding: 20px;
     border-radius: 8px;
     color: #fff;
+<<<<<<< HEAD
     margin-top: 10px;
 }
 
 
+=======
+}
+
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392
 .connect-button {
     background-color: #000;
     color: #fff;
     border: none;
     padding: 10px 15px;
     border-radius: 4px;
     cursor: pointer;
+<<<<<<< HEAD
     margin-left: 10px;
 }
+=======
+}
+>>>>>>> 4cc9370dbfe3c7a3d271f87e6e12747f59f42392