feat: keyvalue

flowsint-web/src/app/dashboard/projects/[project_id]/investigations/[investigation_id]/individuals/data-table.tsx

@@ -94,6 +94,7 @@ import { formatDistanceToNow } from "date-fns"
 import { cn } from "@/lib/utils"
 import { TypeBadge } from "@/components/type-badge"
 import { DialogTitle } from "@radix-ui/react-dialog"
+import { MemoizedKeyValueDisplay } from "@/components/investigations/sketch/profile-panel"
 
 function DragHandle({ id }: { id: number }) {
     const { attributes, listeners } = useSortable({
@@ -608,14 +609,10 @@ function TableCellViewer({ item, children }: { item: any, children: React.ReactN
                 </Button>
             </SheetTrigger>
             <SheetContent side="right" className="flex flex-col">
-                <DialogTitle>
+                <DialogTitle className="text-2xl p-4 font-bold">
                     {item.full_name}
                 </DialogTitle>
-                <div className="mt-12 p-4">
-                    <pre className="overflow-auto rounded-md border bg-muted p-4 text-sm">
-                        <code className="language-json">{JSON.stringify(item, null, 2)}</code>
-                    </pre>
-                </div>
+                <MemoizedKeyValueDisplay data={item} />
                 <SheetFooter className="mt-auto flex gap-2 sm:flex-col sm:space-x-0">
                     <SheetClose asChild>
                         <Button variant="outline" className="w-full">

flowsint-web/src/components/investigations/sketch/profile-panel.tsx

@@ -228,7 +228,7 @@ function KeyValueDisplay({ data, className }: KeyValueDisplayProps) {
             {data && Object.entries(data)
                 .filter(([key]) => !["id", "individual_id", "investigation_id", "group_id", "forceToolbarVisible"].includes(key))
                 .map(([key, value], index) => {
-                    const val = Array.isArray(value) ? value.join(", ") : value?.toString() || null
+                    const val = Array.isArray(value) ? `${value.length} items` : value?.toString() || null
                     return (
                         <div key={index} className="flex w-full items-center border-b border-border divide-x divide-border">
                             <div className="w-1/2 bg-background px-4 p-2 text-sm text-muted-foreground font-normal">{key}</div>