feat: dashboard

2026-03-12 01:44:42 -05:00 · 2025-02-17 10:30:56 +01:00
parent 2ee6c86531
commit d86b5633ef
10 changed files with 136 additions and 93 deletions
--- 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,
--- 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 >
    )
 }
--- a/src/app/investigations/loading.tsx
+++ b/src/app/investigations/loading.tsx
@@ -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
--- 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>
--- 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>
--- 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
--- 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) => (
--- 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>
    )
 }

--- a/src/lib/hooks/investigation/use-socials.ts
+++ 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
+    };
+}
+
--- 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;
+    }
+}