From 8fbb048a14080868011aa289c688e336a02346ce Mon Sep 17 00:00:00 2001
From: Rachid Flih <rf@panora.dev>
Date: Sun, 22 Dec 2024 20:41:51 -0300
Subject: [PATCH] fix: frontend UI improvements

---
 .../app/(Dashboard)/configuration/page.tsx    |  60 +++-
 apps/webapp/src/app/b2c/login/page.tsx        |  68 +++-
 apps/webapp/src/app/layout.tsx                |  14 +-
 .../Configuration/Catalog/CopySnippet.tsx     | 225 ++++++-------
 .../src/components/Connection/columns.tsx     | 302 ++++++++++++++----
 .../src/components/Events/EventsTable.tsx     |   2 +-
 apps/webapp/src/components/Events/columns.tsx | 106 ++++--
 7 files changed, 550 insertions(+), 227 deletions(-)

diff --git a/apps/webapp/src/app/(Dashboard)/configuration/page.tsx b/apps/webapp/src/app/(Dashboard)/configuration/page.tsx
index 66aac6bae..f3d3b1f66 100644
--- a/apps/webapp/src/app/(Dashboard)/configuration/page.tsx
+++ b/apps/webapp/src/app/(Dashboard)/configuration/page.tsx
@@ -39,6 +39,8 @@ import useUpdatePullFrequency from "@/hooks/create/useCreatePullFrequency";
 import { toast } from "sonner";
 import { useQueryClient } from "@tanstack/react-query";
 import { Loader2 } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 
 const frequencyOptions = [
   { label: '5 min', value: 300 },
@@ -63,7 +65,9 @@ export default function Page() {
   const [open, setOpen] = useState(false);
   const [localFrequencies, setLocalFrequencies] = useState<Record<string, string>>({});
   const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});
-
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
+  const [selectedVertical, setSelectedVertical] = useState<string | null>(null);
 
   const queryClient = useQueryClient();
 
@@ -160,11 +164,54 @@ export default function Page() {
     }
   };
 
-  
- 
+  const handleConfirmSuspend = async () => {
+    try {
+      await saveFrequency(selectedVertical, '0');
+      setDialogOpen(false);
+    } catch (error) {
+      console.error('Error suspending sync:', error);
+    }
+  };
+
+  const handleSuspendClick = (vertical: string) => {
+    setSelectedVertical(vertical);
+    setConfirmText('');
+    setDialogOpen(true);
+  };
+
   return (
     
     <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Confirm Sync Suspension</DialogTitle>
+            <DialogDescription>
+              This will stop all automatic syncs for {selectedVertical?.toUpperCase()}. To confirm, please type "suspend" below.
+            </DialogDescription>
+          </DialogHeader>
+          <Input
+            value={confirmText}
+            onChange={(e) => setConfirmText(e.target.value)}
+            placeholder="Type 'suspend' to confirm"
+          />
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirmSuspend}
+              disabled={confirmText.toLowerCase() !== 'suspend'}
+            >
+              Confirm Suspension
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
         <div className="flex-1 space-y-4 p-8 pt-6">
           <div className="flex items-center justify-between space-y-2">
             <Heading
@@ -245,7 +292,7 @@ export default function Page() {
       <CardContent>
   {VERTICALS.map(vertical => (
     <div key={vertical} className="mb-4">
-      <label className="block text-sm font-medium text-white mb-1">
+      <label className="block text-sm font-medium mb-1">
         {vertical.toUpperCase()}
       </label>
       <div className="flex items-center space-x-2">
@@ -266,13 +313,12 @@ export default function Page() {
         </Select>
         {localFrequencies[vertical] && localFrequencies[vertical] !== '0'&& (
           <Button 
-            onClick={() => handleFrequencyChangeAndSave(vertical, '0')}
+            onClick={() => handleSuspendClick(vertical)}
             size="sm" 
             variant="destructive"
             className="h-7"
           >
-            {localFrequencies[vertical]}
-            Deactivate
+            Suspend Sync
           </Button>
         )}
       </div>
diff --git a/apps/webapp/src/app/b2c/login/page.tsx b/apps/webapp/src/app/b2c/login/page.tsx
index b06874d3c..dc80ee392 100644
--- a/apps/webapp/src/app/b2c/login/page.tsx
+++ b/apps/webapp/src/app/b2c/login/page.tsx
@@ -13,6 +13,7 @@ import Cookies from 'js-cookie';
 import useProfileStore from "@/state/profileStore";
 import useUser from "@/hooks/get/useUser";
 import { Button } from "@/components/ui/button";
+import { useTheme } from "next-themes";
 
 export default function Page() {
     const [userInitialized,setUserInitialized] = useState(true)
@@ -20,6 +21,14 @@ export default function Page() {
     const router = useRouter()
     const {profile} = useProfileStore();
     const [activeTab, setActiveTab] = useState('login');
+    const { theme, systemTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    const currentTheme = theme === 'system' ? systemTheme : theme;
 
     useEffect(() => {
         if(profile)
@@ -50,17 +59,63 @@ export default function Page() {
 
     },[])
 
+    if (!mounted) {
+        return (
+            <div className='min-h-screen flex justify-center items-center'>
+                <div className='w-[450px] min-h-[500px] p-8 rounded-lg border bg-card'>
+                    <div className="flex justify-center mb-8">
+                        <img 
+                            src="/logo-panora-black.png"
+                            className='w-32' 
+                            alt="Panora" 
+                        /> 
+                    </div>
+                    <div className="text-center space-y-2 mb-8">
+                        <h1 className="text-2xl font-semibold tracking-tight">Welcome</h1>
+                        <p className="text-sm text-muted-foreground">Sign in to your account or create one</p>
+                    </div>
+                    <Tabs defaultValue="login" className="space-y-6">
+                        <TabsList className="grid w-full grid-cols-2">
+                            <TabsTrigger value="login">Login</TabsTrigger>
+                            <TabsTrigger value="create">Create Account</TabsTrigger>
+                        </TabsList>
+                        <TabsContent value="login">
+                            <LoginUserForm/>
+                        </TabsContent>
+                        <TabsContent value="create">
+                            <CreateUserForm/>
+                        </TabsContent>
+                    </Tabs>
+                    
+                    {activeTab === 'forgot-password' && (
+                        <Button variant="link" onClick={() => setActiveTab('login')}>
+                            Back to Login
+                        </Button>
+                    )}
+                </div>       
+            </div>
+        );
+    }
+
     return (
         <>
         
         {!userInitialized ? 
         (
-            <div className='min-h-screen grid lg:grid-cols-2 mx-auto text-left'>
-                <div className='flex-1 flex flex-col py-12 sm:items-center lg:flex-none lg:px-20 xl:px-24'>
-                    <div className="w-[400px]">
-                    <img src="/logo.png" className='w-14' /> 
+            <div className='min-h-screen flex justify-center items-center'>
+                <div className='w-[450px] min-h-[500px] p-8 rounded-lg border bg-card'>
+                    <div className="flex justify-center mb-8">
+                        <img 
+                            src={currentTheme === "dark" ? "/logo-panora-white-hq.png" : "/logo-panora-black.png"} 
+                            className='w-32' 
+                            alt="Panora" 
+                        /> 
+                    </div>
+                    <div className="text-center space-y-2 mb-8">
+                        <h1 className="text-2xl font-semibold tracking-tight">Welcome</h1>
+                        <p className="text-sm text-muted-foreground">Sign in to your account or create one</p>
                     </div>
-                    <Tabs defaultValue="login" className="w-[400px] space-y-4">
+                    <Tabs defaultValue="login" className="space-y-6">
                         <TabsList className="grid w-full grid-cols-2">
                             <TabsTrigger value="login">Login</TabsTrigger>
                             <TabsTrigger value="create">Create Account</TabsTrigger>
@@ -79,9 +134,6 @@ export default function Page() {
                         </Button>
                     )}
                 </div>       
-                <div className='hidden lg:block relative flex-1'>
-                    <img className='absolute inset-0 h-full w-full object-cover border-l' src="/bgbg.jpeg" alt='Login Page Image' />
-                </div>
             </div>
         ) : 
         (
diff --git a/apps/webapp/src/app/layout.tsx b/apps/webapp/src/app/layout.tsx
index a6d8f03e9..5ac992ced 100644
--- a/apps/webapp/src/app/layout.tsx
+++ b/apps/webapp/src/app/layout.tsx
@@ -10,6 +10,15 @@ const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
   title: "Panora",
   description: "Unified API",
+  icons: {
+    icon: [
+      {
+        url: '/logo.png',
+        href: '/logo.png',
+        type: 'image/png',
+      }
+    ]
+  }
 };
 
 export default function RootLayout({
@@ -22,8 +31,8 @@ export default function RootLayout({
       <body className={`${inter.className} overflow-hidden`}>
         <ThemeProvider
         attribute="class"
-        defaultTheme="system"
-        enableSystem
+        defaultTheme="light"
+        enableSystem={false}
         disableTransitionOnChange
         >
           <Provider>
@@ -31,7 +40,6 @@ export default function RootLayout({
             <Toaster />
           </Provider>
         </ThemeProvider>
-        
       </body>
     </html>
   );
diff --git a/apps/webapp/src/components/Configuration/Catalog/CopySnippet.tsx b/apps/webapp/src/components/Configuration/Catalog/CopySnippet.tsx
index 896f02c2d..fb594cca2 100644
--- a/apps/webapp/src/components/Configuration/Catalog/CopySnippet.tsx
+++ b/apps/webapp/src/components/Configuration/Catalog/CopySnippet.tsx
@@ -8,11 +8,13 @@ import {
     DialogDescription,
     DialogHeader,
     DialogTitle,
-  } from "@/components/ui/dialog"
+    DialogFooter,
+} from "@/components/ui/dialog"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { Copy } from "lucide-react";
+import { Copy, ExternalLink } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
+import { Separator } from "@/components/ui/separator";
 
 export const CopySnippet = () => {
     const [open,setOpen] = useState(false);
@@ -64,7 +66,7 @@ export const CopySnippet = () => {
         setTimeout(() => {
             setCopiedRight(false);
         }, 2000);
-      };
+    };
 
     return (
         <>
@@ -79,138 +81,105 @@ export const CopySnippet = () => {
             <Copy className="h-3.5 w-3.5 mt-[3px] mr-1" />
         </Button>
         <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="flex flex-col w-[70vw] max-w-[1800px]">
-        <DialogHeader>
-          <DialogTitle>Import UI catalog components</DialogTitle>
-          <DialogDescription>
-            You can either import the whole catalog or import a specific connector! <a className='font-bold' href="https://docs.panora.dev/recipes/embed-catalog" target="_blank">More info in our docs.</a>
-          </DialogDescription>
-        </DialogHeader>
-        <Card className="bg-zinc-900">
-          <div className="flex w-full">
-            <div className="flex flex-col gap-2 border-r px-2 py-4 w-1/2">
-              <div className="px-4 text-sm font-medium">Import the whole catalog</div>
-              <div className="grid gap-1">
-                <code className="relative text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-zinc-800 text-white rounded-lg p-2 pl-3 mt-4">
-                    <div 
-                        className="cursor-pointer absolute top-0 right-0" 
-                        onClick={handleCopyLeft}
-                    >
-                        <TooltipProvider>
-                            <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button size="sm" variant="secondary">{copiedLeft ? (
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" height="15" fill="#ffffff">
+            <DialogContent className="sm:max-w-[900px]">
+                <DialogHeader className="space-y-4">
+                    <DialogTitle className="text-2xl">Catalog Widget Code</DialogTitle>
+                    <DialogDescription className="text-base flex items-center gap-2">
+                        Choose between importing the complete catalog or a specific connector
+                        <a 
+                            href="https://docs.panora.dev/recipes/embed-catalog" 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center gap-1 text-primary hover:underline"
+                        >
+                            Learn more in our docs
+                            <ExternalLink className="h-3 w-3" />
+                        </a>
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+                    {/* Complete Catalog Section */}
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <h3 className="font-semibold">Complete Catalog</h3>
+                            <p className="text-sm text-muted-foreground">
+                                Import all available connectors with a single component
+                            </p>
+                        </div>
+                        <Card className="relative bg-zinc-950 p-4">
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                className="absolute top-2 right-2 h-8 w-8 p-0 bg-white hover:bg-zinc-100 border-zinc-200"
+                                onClick={handleCopyLeft}
+                            >
+                                {copiedLeft ? (
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" height="15" fill="currentColor">
                                         <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
                                     </svg>
-                                    ) : (
-                                    <>
-                                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
-                                        </svg>
-                                    </>
-                                    )}
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p className="text-sm">Copy</p>
-                            </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
+                                ) : (
+                                    <Copy className="h-4 w-4" />
+                                )}
+                            </Button>
+                            <pre className="text-sm text-white overflow-x-auto p-2">
+                                <code className="grid gap-2">
+                                    <span>{`<PanoraDynamicCatalogCard`}</span>
+                                    <span className="pl-4"><span className="text-green-400">category</span>{`={ConnectorCategory.Crm}`}</span>
+                                    <span className="pl-4"><span className="text-blue-400">projectId</span>{`={"c9a1b1f8-466d-442d-a95e-11cdd00baf49"}`}</span>
+                                    <span className="pl-4"><span className="text-rose-400">optionalApiUrl</span>{`={"https://acme.inc"}`}</span>
+                                    <span className="pl-4"><span className="text-yellow-400">linkedUserId</span>{`={"b860d6c1-28f9-485c-86cd-fb09e60f10a2"}`}</span>
+                                    <span>{`/>`}</span>
+                                </code>
+                            </pre>
+                        </Card>
                     </div>
-                    <span className="flex flex-col gap-2">
-                        <span className="flex-1">
-                        <span>
-                            {`<PanoraDynamicCatalogCard>`}
-                        </span>
-                        </span>
-                        <span className="pl-4">
-                            <span className="text-green-800">category</span>{`={ConnectorCategory.Crm}`}
-                        </span>
-                        <span className="pl-4">
-                            <span className="text-cyan-600">projectId</span>{`={'c9a1b1f8-466d-442d-a95e-11cdd00baf49'}`}
-                        </span>
-                        <span className="pl-4">	
-                            <span className="text-rose-600">optionalApiUrl</span>{`={'https://acme.inc'}`}
-                        </span>
-                        <span className="pl-4">
-                            <span className="text-amber-400">linkedUserId</span>{`={'b860d6c1-28f9-485c-86cd-fb09e60f10a2'}`}
-                        </span> 
-                        <span className="flex-1">
-                        <span>
-                            {`/>`}
-                        </span>
-                        </span>
-                    </span>
-                </code>
-              </div>
-            </div>
-            <div className="flex flex-col gap-2 px-2 py-4 w-1/2">
-              <div className="px-4 text-sm font-medium">Import Specific Connector</div>
-              <div className="grid gap-1">
-              <code className="relative rtext-sm sm:text-base inline-flex text-left items-center space-x-4 bg-zinc-800 text-white rounded-lg p-2 pl-3 mt-2">
-                    <div 
-                        className="cursor-pointer absolute top-0 right-0" 
-                        onClick={handleCopyRight}
-                    >
-                        <TooltipProvider>
-                            <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button size="sm" variant="secondary">{copiedRight ? (
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" height="15" fill="#ffffff">
+
+                    {/* Specific Connector Section */}
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <h3 className="font-semibold">Specific Connector</h3>
+                            <p className="text-sm text-muted-foreground">
+                                Import a single connector with customizable properties
+                            </p>
+                        </div>
+                        <Card className="relative bg-zinc-950 p-4">
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                className="absolute top-2 right-2 h-8 w-8 p-0 bg-white hover:bg-zinc-100 border-zinc-200"
+                                onClick={handleCopyRight}
+                            >
+                                {copiedRight ? (
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" height="15" fill="currentColor">
                                         <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
                                     </svg>
-                                    ) : (
-                                    <>
-                                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
-                                        </svg>
-                                    </>
-                                    )}
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p className="text-sm">Copy</p>
-                            </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
+                                ) : (
+                                    <Copy className="h-4 w-4" />
+                                )}
+                            </Button>
+                            <pre className="text-sm text-white overflow-x-auto p-2">
+                                <code className="grid gap-2">
+                                    <span>{`<PanoraProviderCard`}</span>
+                                    <span className="pl-4"><span className="text-green-400">name</span>{`={"hubspot"}`}</span>
+                                    <span className="pl-4"><span className="text-blue-400">category</span>{`={ConnectorCategory.Crm}`}</span>
+                                    <span className="pl-4"><span className="text-rose-400">projectId</span>{`={"c9a1b1f8-466d-442d-a95e-11cdd00baf49"}`}</span>
+                                    <span className="pl-4"><span className="text-yellow-400">optionalApiUrl</span>{`={"https://acme.inc"}`}</span>
+                                    <span className="pl-4"><span className="text-purple-400">linkedUserId</span>{`={"b860d6c1-28f9-485c-86cd-fb09e60f10a2"}`}</span>
+                                    <span>{`/>`}</span>
+                                </code>
+                            </pre>
+                        </Card>
                     </div>
-                  <span className="flex flex-col gap-2">
-                    <span className="flex-1">
-                      <span>
-                        {`<PanoraProviderCard>`}
-                      </span>
-                    </span>
-                    <span className="pl-4">
-                      <span className="text-lime-500">name</span>{`={'hubspot'}`}
-                    </span>
-                    <span className="pl-4">
-                        <span className="text-fuchsia-200">category</span>{`={ConnectorCategory.Crm}`}
-                    </span>
-                    <span className="pl-4">
-                        <span className="text-cyan-600">projectId</span>{`={'c9a1b1f8-466d-442d-a95e-11cdd00baf49'}`}
-                    </span>
-                    <span className="pl-4">	
-                        <span className="text-rose-600">optionalApiUrl</span>{`={'https://acme.inc'}`}
-                    </span>
-                    <span className="pl-4">
-                        <span className="text-amber-400">linkedUserId</span>{`={'b860d6c1-28f9-485c-86cd-fb09e60f10a2'}`}
-                    </span> 
-                    <span className="flex-1">
-                      <span>
-                        {`/>`}
-                      </span>
-                    </span>
-                  </span>
-                </code>
-              </div>
-            </div>
-          </div>
-        </Card>
-      </DialogContent>
-    </Dialog>
+                </div>
 
+                <DialogFooter className="mt-6">
+                    <Button variant="outline" onClick={() => setOpen(false)}>
+                        Close
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
         </>
-        
     )
 }
\ No newline at end of file
diff --git a/apps/webapp/src/components/Connection/columns.tsx b/apps/webapp/src/components/Connection/columns.tsx
index 96982c994..48167a0e4 100644
--- a/apps/webapp/src/components/Connection/columns.tsx
+++ b/apps/webapp/src/components/Connection/columns.tsx
@@ -4,16 +4,55 @@ import { ColumnDef } from "@tanstack/react-table"
 import { Badge } from "@/components/ui/badge"
 import { Connection } from "./schema"
 import { DataTableColumnHeader } from "../shared/data-table-column-header"
-import React from "react"
-import { ClipboardIcon } from '@radix-ui/react-icons'
+import React, { useState } from "react"
+import { ClipboardIcon, DotsHorizontalIcon, ReloadIcon, TrashIcon } from '@radix-ui/react-icons'
 import { toast } from "sonner"
 import { getLogoURL } from "@panora/shared"
 import { formatISODate, truncateMiddle } from "@/lib/utils"
 import { Button } from "../ui/button"
 import { Label } from "../ui/label"
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
 import useResync from "@/hooks/create/useResync"
 
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  // If date is today
+  if (date.toDateString() === today.toDateString()) {
+    return `Today at ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}`;
+  }
+  
+  // If date is yesterday
+  if (date.toDateString() === yesterday.toDateString()) {
+    return `Yesterday at ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}`;
+  }
+  
+  // If date is within this year
+  if (date.getFullYear() === today.getFullYear()) {
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+  }
+  
+  // If date is from previous years
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+};
+
 const connectionTokenComponent = ({row}:{row:any}) => {
   const handleCopy = async () => {
     try {
@@ -29,15 +68,79 @@ const connectionTokenComponent = ({row}:{row:any}) => {
     }
   }; 
 
+  const getFirstUUIDPart = (uuid: string) => {
+    return uuid.split('-')[0];
+  };
+
+  return (
+    <div className="flex items-center">
+        <Badge 
+          variant="outline" 
+          className="rounded-sm py-1 font-normal cursor-pointer hover:bg-accent"
+          onClick={handleCopy}
+        >
+          {getFirstUUIDPart(row.getValue("connectionToken"))}
+        </Badge>
+    </div>
+  )
+}
+
+const linkedUserComponent = ({row}:{row:any}) => {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(row.getValue("linkedUser"));
+      toast.success("Linked User ID copied", {
+        action: {
+          label: "Close",
+          onClick: () => console.log("Close"),
+        },
+      })
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  }; 
+
   return (
     <div className="flex items-center">
-        <Badge variant="outline" className="rounded-sm py-1 font-normal">{truncateMiddle(row.getValue("connectionToken"),6)}   
-        <ClipboardIcon onClick={handleCopy} className=""/>
+        <Badge 
+          variant="outline" 
+          className="rounded-sm py-1 font-normal cursor-pointer hover:bg-accent"
+          onClick={handleCopy}
+        >
+          {row.getValue("linkedUser").substring(0, 6)}
         </Badge>
     </div>
   )
 }
 
+const dateComponent = ({row}:{row:any}) => {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(row.getValue("date"));
+      toast.success("Timestamp copied", {
+        action: {
+          label: "Close",
+          onClick: () => console.log("Close"),
+        },
+      })
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  }; 
+
+  return (
+    <div className="flex">
+      <Badge 
+        variant="outline" 
+        className="rounded-sm py-1 font-normal cursor-pointer hover:bg-accent"
+        onClick={handleCopy}
+      >
+        {formatDate(row.getValue("date"))}
+      </Badge>
+    </div>
+  )
+}
+
 const Customizer = ({
   logo,
   name,
@@ -58,6 +161,24 @@ const Customizer = ({
 
   const { resyncPromise } = useResync();
 
+  const getFirstUUIDPart = (uuid: string) => {
+    return uuid.split('-')[0];
+  };
+
+  const handleCopyLinkedUser = async () => {
+    try {
+      await navigator.clipboard.writeText(linkedUserId);
+      toast.success("Linked User ID copied", {
+        action: {
+          label: "Close",
+          onClick: () => console.log("Close"),
+        },
+      })
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  };
+
   const handleResync = async (vertical: string, name: string, linkedUserId: string) => {
     try {
       toast.promise(
@@ -111,11 +232,29 @@ const Customizer = ({
       </div>
       <div className="flex justify-between items-center">
         <Label className="text-xs">Connection Token</Label>
-        <Badge variant={"outline"} className="py-1 font-normal">{truncateMiddle(connectionToken,6)}</Badge>
+        <Badge 
+          variant={"outline"} 
+          className="py-1 font-normal cursor-pointer hover:bg-accent"
+          onClick={() => {
+            navigator.clipboard.writeText(connectionToken);
+            toast.success("Connection token copied");
+          }}
+        >
+          {getFirstUUIDPart(connectionToken)}
+        </Badge>
       </div>
       <div className="flex justify-between items-center">
         <Label className="text-xs">Linked User Id</Label>
-        <Badge variant={"outline"} className="py-1 font-normal">{truncateMiddle(linkedUserId,6)}</Badge>
+        <Badge 
+          variant={"outline"} 
+          className="py-1 font-normal cursor-pointer hover:bg-accent"
+          onClick={() => {
+            navigator.clipboard.writeText(linkedUserId);
+            toast.success("Linked User ID copied");
+          }}
+        >
+          {linkedUserId.substring(0, 6)}
+        </Badge>
       </div>
     </div>
     <div className="flex align-middle pt-2">
@@ -144,7 +283,7 @@ export const columns: ColumnDef<Connection>[] = [
   {
     accessorKey: "app", 
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="App" />
+      <DataTableColumnHeader column={column} title="Provider" />
     ),
     cell: ({ row }) => {      
       const provider = (row.getValue("app") as string).toLowerCase();
@@ -162,14 +301,11 @@ export const columns: ColumnDef<Connection>[] = [
   {
     accessorKey: "category",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Category" />
+      <DataTableColumnHeader column={column} title="Auth" />
     ),
     cell: ({ row }) => {
       return (
         <div className="flex w-[100px] items-center">
-          {/*status.icon && (
-            <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-          )*/}
           <Badge variant="outline" className="rounded-sm py-1 font-normal">{row.getValue("category")}</Badge>
         </div>
       )
@@ -192,46 +328,24 @@ export const columns: ColumnDef<Connection>[] = [
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Linked User" />
     ),
-    cell: ({ row }) => {
-      /*const status = statuses.find(
-        (status) => status.value === row.getValue("linkedUser")
-      )
-
-      if (!status) {
-        return null
-      }*/
-
-      return (
-        <div className="flex w-[100px] items-center">
-          <Badge variant="outline" className="rounded-sm py-1 font-normal">{truncateMiddle(row.getValue("linkedUser"), 10)}</Badge>
-        </div>
-      )
-    },
+    cell: linkedUserComponent,
     filterFn: (row, id, value) => {
       return value.includes(row.getValue(id))
     },
   },
   {
-    accessorKey: "date",
+    accessorKey: "connectionToken",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Date" />
+      <DataTableColumnHeader column={column} title="Connection Token" />
     ),
-    cell: ({ row }) => {
-      //const label = labels.find((label) => label.value === row.original.date)
-
-      return (
-        <div className="flex">
-          <Badge variant="outline" className="rounded-sm py-1 font-normal">{formatISODate(row.getValue("date"))}</Badge>
-        </div>
-      )
-    },
+    cell: connectionTokenComponent
   },
   {
-    accessorKey: "connectionToken",
+    accessorKey: "date",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Connection Token" />
+      <DataTableColumnHeader column={column} title="Date" />
     ),
-    cell: connectionTokenComponent
+    cell: dateComponent,
   },
   { 
     accessorKey: "status",
@@ -239,28 +353,92 @@ export const columns: ColumnDef<Connection>[] = [
       ''
     ),
     cell: ({ row }) => {
+      const { resyncPromise } = useResync();
+      const [dialogOpen, setDialogOpen] = useState(false);
+      const [confirmText, setConfirmText] = useState('');
+
+      const handleResync = async () => {
+        try {
+          toast.promise(
+            resyncPromise({
+              vertical: row.getValue("vertical"),
+              provider: row.getValue("app"),
+              linkedUserId: row.getValue("linkedUser")
+            }),
+            {
+              loading: 'Syncing...',
+              success: 'Sync initiated successfully',
+              error: 'Failed to sync'
+            }
+          );
+        } catch (error) {
+          console.error('Failed to resync:', error);
+        }
+      };
+
+      const handleDisconnectClick = () => {
+        setConfirmText('');
+        setDialogOpen(true);
+      };
+
+      const handleConfirmDisconnect = () => {
+        if (confirmText.toLowerCase() === 'delete') {
+          // TODO: Implement disconnect logic here
+          toast.success('Connection deleted successfully');
+          setDialogOpen(false);
+        }
+      };
+
       return (
-        <div className="flex items-center">
-           <Popover>
-            <PopoverTrigger asChild>
-              <Button size="sm" className="rounded-sm py-1 h-7 font-normal mr-1"><p className="pr-2">More Info</p> <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6788 2.95419C10.0435 2.53694 9.18829 2.54594 8.51194 3.00541C8.35757 3.11027 8.1921 3.27257 7.7651 3.69957L7.14638 4.31829C6.95112 4.51355 6.63454 4.51355 6.43928 4.31829C6.24401 4.12303 6.24401 3.80645 6.43928 3.61119L7.058 2.99247C7.0725 2.97797 7.08679 2.96366 7.1009 2.94955C7.47044 2.57991 7.70691 2.34336 7.95001 2.17822C8.94398 1.50299 10.2377 1.46813 11.2277 2.11832C11.4692 2.27689 11.7002 2.508 12.0515 2.85942C12.0662 2.8741 12.081 2.88898 12.0961 2.90408C12.1112 2.91917 12.1261 2.93405 12.1408 2.94871C12.4922 3.30001 12.7233 3.53102 12.8819 3.77248C13.5321 4.76252 13.4972 6.05623 12.822 7.0502C12.6568 7.2933 12.4203 7.52976 12.0507 7.89929C12.0366 7.9134 12.0222 7.92771 12.0077 7.94221L11.389 8.56093C11.1938 8.7562 10.8772 8.7562 10.6819 8.56093C10.4867 8.36567 10.4867 8.04909 10.6819 7.85383L11.3006 7.23511C11.7276 6.80811 11.8899 6.64264 11.9948 6.48827C12.4543 5.81192 12.4633 4.95675 12.046 4.32141C11.9513 4.17714 11.8009 4.02307 11.389 3.61119C10.9771 3.1993 10.8231 3.04893 10.6788 2.95419ZM4.31796 6.43961C4.51322 6.63487 4.51322 6.95146 4.31796 7.14672L3.69924 7.76544C3.27224 8.19244 3.10993 8.35791 3.00507 8.51227C2.54561 9.18863 2.53661 10.0438 2.95385 10.6791C3.0486 10.8234 3.19896 10.9775 3.61085 11.3894C4.02274 11.8012 4.17681 11.9516 4.32107 12.0464C4.95642 12.4636 5.81158 12.4546 6.48794 11.9951C6.6423 11.8903 6.80777 11.728 7.23477 11.301L7.85349 10.6823C8.04875 10.487 8.36533 10.487 8.5606 10.6823C8.75586 10.8775 8.75586 11.1941 8.5606 11.3894L7.94188 12.0081C7.92738 12.0226 7.91307 12.0369 7.89897 12.051C7.52943 12.4206 7.29296 12.6572 7.04986 12.8223C6.05589 13.4976 4.76219 13.5324 3.77214 12.8822C3.53068 12.7237 3.29967 12.4925 2.94837 12.1411C2.93371 12.1264 2.91883 12.1116 2.90374 12.0965C2.88865 12.0814 2.87377 12.0665 2.8591 12.0518C2.50766 11.7005 2.27656 11.4695 2.11799 11.2281C1.4678 10.238 1.50265 8.94432 2.17788 7.95035C2.34303 7.70724 2.57957 7.47077 2.94922 7.10124C2.96333 7.08713 2.97763 7.07283 2.99213 7.05833L3.61085 6.43961C3.80611 6.24435 4.12269 6.24435 4.31796 6.43961Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></Button>
-            </PopoverTrigger>
-            <PopoverContent
-              align="center"
-              className="w-[340px] mr-40 mb-3 rounded-[0.5rem] bg-white p-6 dark:bg-zinc-950"
-            >
-            <Customizer 
-              logo={getLogoURL((row.getValue("app") as string).toLowerCase())}
-              name={(row.getValue("app") as string)}
-              vertical={(row.getValue("vertical") as string)}
-              lastSync={"12/07/2024, 12:58:02 PM"}
-              authStrategy={row.getValue("category")}
-              linkedUserId={row.getValue("linkedUser")}
-              connectionToken={row.getValue("connectionToken")}
-            />
-          </PopoverContent>
-        </Popover>
-        </div>
+        <>
+          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Confirm Connection Deletion</DialogTitle>
+                <DialogDescription>
+                  This will permanently delete the integration for {row.getValue("app")}. To confirm, please type "delete" below.
+                </DialogDescription>
+              </DialogHeader>
+              <Input
+                value={confirmText}
+                onChange={(e) => setConfirmText(e.target.value)}
+                placeholder="Type 'delete' to confirm"
+              />
+              <DialogFooter>
+                <Button
+                  variant="ghost"
+                  onClick={() => setDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="destructive"
+                  onClick={handleConfirmDisconnect}
+                  disabled={confirmText.toLowerCase() !== 'delete'}
+                >
+                  Confirm Delete
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8">
+                <DotsHorizontalIcon className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={handleResync}>
+                <ReloadIcon className="mr-2 h-4 w-4" />
+                <span>Resync</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-destructive" onClick={handleDisconnectClick}>
+                <TrashIcon className="mr-2 h-4 w-4" />
+                <span>Delete</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
       )
     },
     filterFn: (row, id, value) => {
diff --git a/apps/webapp/src/components/Events/EventsTable.tsx b/apps/webapp/src/components/Events/EventsTable.tsx
index 288e00d23..a893433e4 100644
--- a/apps/webapp/src/components/Events/EventsTable.tsx
+++ b/apps/webapp/src/components/Events/EventsTable.tsx
@@ -25,7 +25,7 @@ export default function EventsTable() {
     method: event.method, 
     url: event.url, 
     status: event.status,
-    direction: event.type, 
+    type: event.type, 
     integration: event.provider, 
     id_linked_user: event.id_linked_user,
     date: event.timestamp.toLocaleString(), 
diff --git a/apps/webapp/src/components/Events/columns.tsx b/apps/webapp/src/components/Events/columns.tsx
index 70f9b920e..373a75eaa 100644
--- a/apps/webapp/src/components/Events/columns.tsx
+++ b/apps/webapp/src/components/Events/columns.tsx
@@ -6,6 +6,88 @@ import { DataTableColumnHeader } from "../shared/data-table-column-header"
 import { Event } from "./schema"
 import { getLogoURL } from "@panora/shared"
 import { formatISODate } from "@/lib/utils"
+import { toast } from "sonner"
+
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  // If date is today
+  if (date.toDateString() === today.toDateString()) {
+    return `Today at ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}`;
+  }
+  
+  // If date is yesterday
+  if (date.toDateString() === yesterday.toDateString()) {
+    return `Yesterday at ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}`;
+  }
+  
+  // If date is within this year
+  if (date.getFullYear() === today.getFullYear()) {
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+  }
+  
+  // If date is from previous years
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+};
+
+const linkedUserComponent = ({row}:{row:any}) => {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(row.getValue("id_linked_user"));
+      toast.success("Linked User ID copied", {
+        action: {
+          label: "Close",
+          onClick: () => console.log("Close"),
+        },
+      })
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  }; 
+
+  return (
+    <div className="flex items-center">
+        <Badge 
+          variant="outline" 
+          className="rounded-sm py-1 font-normal cursor-pointer hover:bg-accent"
+          onClick={handleCopy}
+        >
+          {row.getValue("id_linked_user").substring(0, 6)}
+        </Badge>
+    </div>
+  )
+}
+
+const dateComponent = ({row}:{row:any}) => {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(row.getValue("date"));
+      toast.success("Timestamp copied", {
+        action: {
+          label: "Close",
+          onClick: () => console.log("Close"),
+        },
+      })
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  }; 
+
+  return (
+    <div className="flex space-x-2">
+      <Badge 
+        variant="outline" 
+        className="rounded-sm py-1 font-normal cursor-pointer hover:bg-accent"
+        onClick={handleCopy}
+      >
+        {formatDate(row.getValue("date"))}
+      </Badge>
+    </div>
+  )
+}
 
 export const columns: ColumnDef<Event>[] = [
   {
@@ -53,14 +135,14 @@ export const columns: ColumnDef<Event>[] = [
     },
   },
   {
-    accessorKey: "direction",
+    accessorKey: "type",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Direction" />
+      <DataTableColumnHeader column={column} title="Type" />
     ),
     cell: ({ row }) => {
       return (
         <div className="flex items-center">
-          <Badge variant="outline" className="rounded-sm py-1 font-normal">{row.getValue("direction")}</Badge>
+          <Badge variant="outline" className="rounded-sm py-1 font-normal">{row.getValue("type")}</Badge>
         </div>
       )
     },
@@ -78,7 +160,7 @@ export const columns: ColumnDef<Event>[] = [
 
       return (
         <div className="flex w-[100px] items-center">
-            <Badge variant={"outline"} className="rounded-sm py-1 pr-2 font-normal">
+            <Badge variant="outline" className="rounded-sm py-1 pr-2 font-normal">
               <img src={getLogoURL(provider)} className="w-5 h-5 rounded-sm mr-2" 
               />
               {provider}
@@ -95,13 +177,7 @@ export const columns: ColumnDef<Event>[] = [
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Id Linked User" />
     ),
-    cell: ({ row }) => {
-      return (
-        <div className="flex items-center">
-          <Badge variant="outline" className="rounded-sm py-1 font-normal">{row.getValue("id_linked_user")}</Badge>
-        </div>
-      )
-    },
+    cell: linkedUserComponent,
     filterFn: (row, id, value) => {
       return value.includes(row.getValue(id))
     },
@@ -111,12 +187,6 @@ export const columns: ColumnDef<Event>[] = [
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Date" />
     ),
-    cell: ({ row }) => {
-      return (
-        <div className="flex space-x-2">
-          <Badge variant="outline" className="rounded-sm py-1 font-normal">{formatISODate(row.getValue("date"))}</Badge>
-        </div>
-      )
-    },
+    cell: dateComponent,
   }
 ]
\ No newline at end of file