From d86b5633ef77173846adb4632607b7ba91a526b1 Mon Sep 17 00:00:00 2001
From: dextmorgn <dexxterrmorgan@proton.me>
Date: Mon, 17 Feb 2025 10:30:56 +0100
Subject: [PATCH] feat: dashboard

---
 .../[investigation_id]/layout.tsx             |  2 +
 .../[investigation_id]/left.tsx               | 39 +++++++--
 src/app/investigations/loading.tsx            |  9 --
 src/components/contexts/chatbot-context.tsx   | 14 +--
 .../contexts/investigation-provider.tsx       |  4 +-
 src/components/contexts/node-context.tsx      |  2 +-
 .../investigations/case-selector.tsx          |  6 +-
 src/components/investigations/layout.tsx      | 86 ++++++++++---------
 src/lib/hooks/investigation/use-socials.ts    | 25 ++++++
 styles/globals.css                            | 42 ++++-----
 10 files changed, 136 insertions(+), 93 deletions(-)
 delete mode 100644 src/app/investigations/loading.tsx
 create mode 100644 src/lib/hooks/investigation/use-socials.ts

diff --git a/src/app/investigations/[investigation_id]/layout.tsx b/src/app/investigations/[investigation_id]/layout.tsx
index 47511bb..c7d0bb7 100644
--- a/src/app/investigations/[investigation_id]/layout.tsx
+++ b/src/app/investigations/[investigation_id]/layout.tsx
@@ -6,6 +6,8 @@ import { createClient } from "@/lib/supabase/server";
 import { notFound, redirect } from "next/navigation";
 import { ChatProvider } from '@/components/contexts/chatbot-context';
 import { getInvestigation } from '@/lib/actions/investigations';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { AppSidebar } from '@/components/app-sidebar';
 
 const DashboardLayout = async ({
     children,
diff --git a/src/app/investigations/[investigation_id]/left.tsx b/src/app/investigations/[investigation_id]/left.tsx
index 209fa93..fc4aa15 100644
--- a/src/app/investigations/[investigation_id]/left.tsx
+++ b/src/app/investigations/[investigation_id]/left.tsx
@@ -6,6 +6,7 @@ import { cn } from '@/lib/utils';
 import { AtSignIcon, PhoneIcon, UserIcon } from 'lucide-react';
 import { useEmails } from '@/lib/hooks/investigation/use-emails';
 import { usePhones } from '@/lib/hooks/investigation/use-phones';
+import { useSocials } from '@/lib/hooks/investigation/use-socials';
 import {
     Accordion,
     AccordionContent,
@@ -19,6 +20,7 @@ const Left = ({ investigation_id }: { investigation_id: string }) => {
     const { individuals, isLoading: isLoadingIndividuals, refetch: refetchIndividuals } = useIndividuals(investigation_id)
     const { emails, isLoading: isLoadingEmails, refetch: refetchEmails } = useEmails(investigation_id)
     const { phones, isLoading: isLoadingPhones, refetch: refetchPhones } = usePhones(investigation_id)
+    const { socials, isLoading: isLoadingSocials, refetch: refetchSocials } = useSocials(investigation_id)
 
     const { currentNode, setCurrentNode } = useFlowStore()
 
@@ -37,9 +39,9 @@ const Left = ({ investigation_id }: { investigation_id: string }) => {
                         }
                         <ul>
                             {individuals?.map((individual: any) => (
-                                <li className={cn('hover:bg-sidebar-accent text-sidebar-accent-foreground/60 hover:text-sidebar-accent-foreground text-sm', currentNode === individual.id && "bg-sidebar-accent text-sidebar-accent-foreground")} key={individual.id}>
+                                <li className={cn('hover:bg-sidebar-accent text-sidebar-accent-foreground/90 hover:text-sidebar-accent-foreground text-sm', currentNode === individual.id && "bg-sidebar-accent text-sidebar-accent-foreground")} key={individual.id}>
                                     <button onClick={() => setCurrentNode(individual.id)} className='flex items-center p-1 px-4 w-full gap-2'>
-                                        <UserIcon className='h-3 w-3' />
+                                        <UserIcon className='h-3 w-3 opacity-60' />
                                         {individual.full_name}
                                     </button>
                                 </li>
@@ -62,9 +64,9 @@ const Left = ({ investigation_id }: { investigation_id: string }) => {
                         }
                         <ul>
                             {emails?.map((email: any) => (
-                                <li className={cn('hover:bg-sidebar-accent text-sidebar-accent-foreground/60 hover:text-sidebar-accent-foreground text-sm', currentNode === email.id && "bg-sidebar-accent text-sidebar-accent-foreground")} key={email.id}>
+                                <li className={cn('hover:bg-sidebar-accent text-sidebar-accent-foreground/90 hover:text-sidebar-accent-foreground text-sm', currentNode === email.id && "bg-sidebar-accent text-sidebar-accent-foreground")} key={email.id}>
                                     <button onClick={() => setCurrentNode(email.id)} className='flex items-center p-1 px-4 w-full gap-2'>
-                                        <AtSignIcon className='h-3 w-3' />
+                                        <AtSignIcon className='h-3 w-3 opacity-60' />
                                         {email.email}
                                     </button>
                                 </li>
@@ -87,9 +89,9 @@ const Left = ({ investigation_id }: { investigation_id: string }) => {
                         }
                         <ul>
                             {phones?.map((phone: any) => (
-                                <li className={cn('hover:bg-sidebar-accent text-sidebar-accent-foreground/60 hover:text-sidebar-accent-foreground text-sm', currentNode === phone.id && "bg-sidebar-accent text-sidebar-accent-foreground")} key={phone.id}>
+                                <li className={cn('hover:bg-sidebar-accent text-sidebar-accent-foreground/90 hover:text-sidebar-accent-foreground text-sm', currentNode === phone.id && "bg-sidebar-accent text-sidebar-accent-foreground")} key={phone.id}>
                                     <button onClick={() => setCurrentNode(phone.id)} className='flex items-center p-1 px-4 w-full gap-2'>
-                                        <PhoneIcon className='h-3 w-3' />
+                                        <PhoneIcon className='h-3 w-3 opacity-60' />
                                         {phone.phone_number}
                                     </button>
                                 </li>
@@ -99,6 +101,31 @@ const Left = ({ investigation_id }: { investigation_id: string }) => {
                     </AccordionContent>
                 </AccordionItem>
             </Accordion>
+            <Accordion type="single" collapsible defaultValue='socials'>
+                <AccordionItem value="socials">
+                    <AccordionTrigger className='p-2 px-4 hover:bg-sidebar-accent text-sidebar-accent-foreground/60 hover:text-sidebar-accent-foreground text-sm rounded-none'>
+                        Socials {!isLoadingSocials && <>({socials?.length})</>}</AccordionTrigger>
+                    <AccordionContent>
+                        {isLoadingSocials && <div className='flex flex-col gap-1'>
+                            <Skeleton className='w-full h-[20px] bg-foreground/10 rounded-none' />
+                            <Skeleton className='w-full h-[20px] bg-foreground/10 rounded-none' />
+                            <Skeleton className='w-full h-[20px] bg-foreground/10 rounded-none' />
+                        </div>
+                        }
+                        <ul>
+                            {socials?.map((social: any) => (
+                                <li className={cn('hover:bg-sidebar-accent text-sidebar-accent-foreground/90 hover:text-sidebar-accent-foreground text-sm', currentNode === social.id && "bg-sidebar-accent text-sidebar-accent-foreground")} key={social.id}>
+                                    <button onClick={() => setCurrentNode(social.id)} className='flex items-center p-1 px-4 w-full gap-2'>
+                                        <PhoneIcon className='h-3 w-3 opacity-60' />
+                                        {social.username || social.profile_url}
+                                    </button>
+                                </li>
+                            ))
+                            }
+                        </ul>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
         </div >
     )
 }
diff --git a/src/app/investigations/loading.tsx b/src/app/investigations/loading.tsx
deleted file mode 100644
index 7a28b35..0000000
--- a/src/app/investigations/loading.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const loading = () => {
-    return (
-        <div className='h-screen w-screen flex items-center justify-center gap-2'>Loading investigation...</div>
-    )
-}
-
-export default loading
\ No newline at end of file
diff --git a/src/components/contexts/chatbot-context.tsx b/src/components/contexts/chatbot-context.tsx
index 7d4e94e..3dd00cc 100644
--- a/src/components/contexts/chatbot-context.tsx
+++ b/src/components/contexts/chatbot-context.tsx
@@ -50,27 +50,21 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
                             <div key={m.id} className="flex grow mb-2">
                                 <div
                                     className={cn(
-                                        "flex gap-1 items-start w-full",
-                                        m.role === "user" ? "flex-row-reverse justify-end" : "flex-row justify-start",
+                                        "flex gap-3 items-start w-full flex-row justify-start",
                                     )}
                                 >
                                     <Avatar className={cn("h-8 w-8")}>
                                         <AvatarFallback>
                                             {m.role === "user" ? (
                                                 <User className="h-4 w-4" />
-                                            ) : isLoading ? (
-                                                <LoadingDots />
                                             ) : (
                                                 <Bot className="h-4 w-4" />
                                             )}
                                         </AvatarFallback>
                                     </Avatar>
-                                    <div className={cn("flex flex-col gap-1 w-full", m.role === "user" ? "items-end" : "items-start")}>
-                                        <span className={cn("text-sm font-bold", m.role === "user" ? "text-right" : "text-left")}>
-                                            {isLoading && m.role !== "user" ? <LoadingDots /> : m.role === "user" ? "User" : "Chatbot"}
-                                        </span>
-                                        <Card className="max-w-[80%]">
-                                            <CardContent className="p-3">
+                                    <div className={cn("flex flex-col gap-1 w-full items-start")}>
+                                        <Card className="bg-transparent border-0">
+                                            <CardContent className="p-0">
                                                 <ReactMarkdown>{m.content}</ReactMarkdown>
                                             </CardContent>
                                         </Card>
diff --git a/src/components/contexts/investigation-provider.tsx b/src/components/contexts/investigation-provider.tsx
index e866bd6..bb25ffb 100644
--- a/src/components/contexts/investigation-provider.tsx
+++ b/src/components/contexts/investigation-provider.tsx
@@ -57,7 +57,7 @@ export const InvestigationProvider: React.FC<InvestigationProviderProps> = ({ ch
         showMiniMap: true,
         showCopyIcon: true,
         showNodeToolbar: true,
-        floatingEdges: false
+        // floatingEdges: false
     });
 
     const createQueryString = useCallback(
@@ -107,7 +107,7 @@ export const InvestigationProvider: React.FC<InvestigationProviderProps> = ({ ch
                         <SettingSwitch setting={"showMiniMap"} value={settings.showMiniMap} title={"Show minimap on the canva"} description={"Displays the minimap on canva."} />
                         <SettingSwitch setting={"showCopyIcon"} value={settings.showCopyIcon} title={"Show copy button on nodes"} description={"Displays a copy button on the nodes."} />
                         <SettingSwitch setting={"showNodeToolbar"} value={settings.showNodeToolbar} title={"Show toolbar on nodes"} description={"Displays a toolbar with actions on the nodes."} />
-                        <SettingSwitch disabled setting={"floatingEdges"} value={settings.floatingEdges} title={"Floating edges"} description={"Edges are not stuck to one point."} />
+                        {/* <SettingSwitch disabled setting={"floatingEdges"} value={settings.floatingEdges} title={"Floating edges"} description={"Edges are not stuck to one point."} /> */}
                         <div className="flex items-center justify-between gap-4">
                             <div className="flex flex-col gap-1">
                                 <p className="font-medium">Theme</p>
diff --git a/src/components/contexts/node-context.tsx b/src/components/contexts/node-context.tsx
index 92f9da1..b68b1f1 100644
--- a/src/components/contexts/node-context.tsx
+++ b/src/components/contexts/node-context.tsx
@@ -166,7 +166,7 @@ export const NodeProvider: React.FC<NodeProviderProps> = (props: any) => {
                                 const [key, value] = field.split(":")
                                 return (
                                     <label key={i}>
-                                        <p>
+                                        <p className="my-2">
                                             {key}
                                         </p>
                                         <Input
diff --git a/src/components/investigations/case-selector.tsx b/src/components/investigations/case-selector.tsx
index ffefffc..1184dea 100644
--- a/src/components/investigations/case-selector.tsx
+++ b/src/components/investigations/case-selector.tsx
@@ -19,10 +19,10 @@ export default function CaseSelector() {
     };
     return (
         <div className="flex items-center">
-            {isLoading || isLoadingInvestigation ? <Skeleton className="h-8 w-40" /> :
+            {isLoading || isLoadingInvestigation ? <Skeleton className="h-8 w-40 bg-foreground/10" /> :
                 <Select onValueChange={handleSelectionChange} defaultValue={investigation?.id}>
-                    <SelectTrigger className="min-w-none w-full shadow-none text-ellipsis truncate gap-1">
-                        <SelectValue defaultValue={investigation?.title || ""} placeholder="Select a fruit" />
+                    <SelectTrigger className="min-w-none w-full hover:bg-sidebar-accent shadow-none border-none text-ellipsis truncate gap-1">
+                        <SelectValue defaultValue={investigation?.title || ""} placeholder="Select an investigation" />
                     </SelectTrigger>
                     <SelectContent>
                         {investigations?.map((investigation) => (
diff --git a/src/components/investigations/layout.tsx b/src/components/investigations/layout.tsx
index 7903d88..a72ba24 100644
--- a/src/components/investigations/layout.tsx
+++ b/src/components/investigations/layout.tsx
@@ -13,6 +13,8 @@ import { NavUser } from '@/components/user';
 import { Button } from '../ui/button';
 import { ScrollArea } from '../ui/scroll-area';
 import Assistant from '../assistant';
+import { AppSidebar } from '../app-sidebar';
+import { SidebarProvider } from '../ui/sidebar';
 
 const InvestigationLayout = ({
     children,
@@ -27,51 +29,51 @@ const InvestigationLayout = ({
 }) => {
     const { panelOpen, setPanelOpen } = useInvestigationContext()
     return (
-        <PanelGroup autoSaveId="conditional" className='h-screen w-screen flex' direction="horizontal">
-            {panelOpen && <Panel id="left" order={1} className='h-screen' defaultSize={20} minSize={15}>
-                <div className='flex flex-col w-full h-full rounded-none shadow-none border-r'>
-                    <div className='w-full rounded-none shadow-none h-12 border-b flex items-center gap-1 flex-row justify-between p-2'>
-                        <Logo />
-                        <div className='flex gap-1'>
-                            <SearchModal investigation_id={investigation_id} />
-                            <NewCase>
-                                <Button variant="outline" size="icon">
-                                    <PlusIcon className="h-5" />
-                                </Button>
-                            </NewCase>
-                        </div>
-                    </div>
-                    <ScrollArea type="auto" className='h-full grow overflow-y-auto'>
-                        <div className="flex flex-col">
-                            {left}
-                        </div>
-                    </ScrollArea>
-                    <div className="flex justify-end p-2">
-                        <NavUser user={user} />
-                    </div>
-                </div>
-            </Panel>}
-            <PanelResizeHandle />
-            <Panel id="right" order={2} defaultSize={80} minSize={50} className='grow flex flex-col'>
-                <div>
-                    <div className='w-full rounded-none shadow-none h-12 justify-between border-b flex flex-row items-center'>
-                        <div className='grow flex items-center justify-between p-2'>
-                            <div className='flex gap-1 p-2'>
-                                <Button onClick={() => setPanelOpen(!panelOpen)} size="icon" variant="outline">
-                                    <PanelRightIcon className='h-4 w-4' />
-                                </Button>
-                                <CaseSelector />
+        <SidebarProvider defaultOpen={false}>
+            <AppSidebar defaultChecked={false} />
+            <PanelGroup autoSaveId="conditional" className='h-screen w-screen flex' direction="horizontal">
+                {panelOpen && <Panel id="left" order={1} className='h-screen' defaultSize={20} minSize={15}>
+                    <div className='flex flex-col w-full h-full rounded-none shadow-none border-r'>
+                        <div className='w-full rounded-none shadow-none h-12 border-b flex items-center gap-1 flex-row justify-between p-2'>
+                            <Logo />
+                            <div className='flex gap-1'>
+                                <SearchModal investigation_id={investigation_id} />
+                                <NewCase>
+                                    <Button variant="outline" size="icon">
+                                        <PlusIcon className="h-5" />
+                                    </Button>
+                                </NewCase>
                             </div>
-                            <MoreMenu />
-                        </div>
-                        <div className='border-l h-full flex items-center'>
-                            <Assistant />
                         </div>
+                        <ScrollArea type="auto" className='h-full grow overflow-y-auto'>
+                            <div className="flex flex-col">
+                                {left}
+                            </div>
+                        </ScrollArea>
                     </div>
-                    {children}
-                </div>
-            </Panel>
-        </PanelGroup >
+                </Panel>}
+                <PanelResizeHandle />
+                <Panel id="right" order={2} defaultSize={80} minSize={50} className='grow flex flex-col'>
+                    <div>
+                        <div className='w-full rounded-none shadow-none h-12 justify-between border-b flex flex-row items-center'>
+                            <div className='grow flex items-center justify-between p-2'>
+                                <div className='flex gap-1 p-2'>
+                                    <Button onClick={() => setPanelOpen(!panelOpen)} size="icon" variant="outline">
+                                        <PanelRightIcon className='h-4 w-4' />
+                                    </Button>
+                                    <CaseSelector />
+                                </div>
+                                <MoreMenu />
+                            </div>
+                            <div className='border-l h-full flex items-center'>
+                                <Assistant />
+                            </div>
+                        </div>
+                        {children}
+                    </div>
+                </Panel>
+            </PanelGroup >
+        </SidebarProvider>
     )
 }
 
diff --git a/src/lib/hooks/investigation/use-socials.ts b/src/lib/hooks/investigation/use-socials.ts
new file mode 100644
index 0000000..f3afe6a
--- /dev/null
+++ b/src/lib/hooks/investigation/use-socials.ts
@@ -0,0 +1,25 @@
+import { supabase } from "@/lib/supabase/client";
+import { useQuery } from "@supabase-cache-helpers/postgrest-swr";
+
+export function useSocials(investigationId: string | null | undefined) {
+    const { data: socials, mutate, isLoading, error } = useQuery(Boolean(investigationId) ?
+        supabase
+            .from('social_accounts')
+            .select(`
+                *
+            `)
+            .eq("investigation_id", investigationId)
+        : null,
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+        }
+    );
+    return {
+        socials: socials || null,
+        isLoading,
+        refetch: mutate,
+        error: error
+    };
+}
+
diff --git a/styles/globals.css b/styles/globals.css
index afa2de8..ea5482b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -71,9 +71,9 @@
     --chart-3: hsl(30 80% 55%);
     --chart-4: hsl(280 65% 60%);
     --chart-5: hsl(340 75% 55%);
-    --sidebar: hsl(240 5.9% 10%);
+    --sidebar: hsl(240 0% 9.9%);
     --sidebar-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-primary: hsl(224.3 76.3% 48%);
+    --sidebar-primary: hsl(262.1 83.3% 57.8%);
     --sidebar-primary-foreground: hsl(0 0% 100%);
     --sidebar-accent: hsl(240 3.7% 15.9%);
     --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
@@ -126,24 +126,26 @@
     --color-sidebar-primary: var(--sidebar-primary);
     --color-sidebar-foreground: var(--sidebar-foreground);
     --color-sidebar: var(--sidebar);
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
 
-  @keyframes accordion-down {
-    from {
-      height: 0;
+    @keyframes accordion-down {
+        from {
+            height: 0;
         }
-    to {
-      height: var(--radix-accordion-content-height);
+
+        to {
+            height: var(--radix-accordion-content-height);
         }
     }
 
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
         }
-    to {
-      height: 0;
+
+        to {
+            height: 0;
         }
     }
 }
@@ -183,11 +185,11 @@
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
+    * {
+        @apply border-border outline-ring/50;
     }
-  body {
-    @apply bg-background text-foreground;
-    }
-}
 
+    body {
+        @apply bg-background text-foreground;
+    }
+}
\ No newline at end of file