CS-408 [Bug] - org chart image doesn't update after upload, delete, or replace

apps/app/src/app/(app)/[orgId]/people/org-chart/components/OrgChartContent.tsx

@@ -20,18 +20,26 @@ interface OrgChartData {
 interface OrgChartContentProps {
   chartData: OrgChartData | null;
   members: OrgChartMember[];
+  onChartChange: () => void | Promise<unknown>;
 }
 
-export function OrgChartContent({ chartData, members }: OrgChartContentProps) {
+export function OrgChartContent({
+  chartData,
+  members,
+  onChartChange,
+}: OrgChartContentProps) {
   if (!chartData) {
-    return <OrgChartEmptyState members={members} />;
+    return (
+      <OrgChartEmptyState members={members} onChartChange={onChartChange} />
+    );
   }
 
   if (chartData.type === 'uploaded' && chartData.signedImageUrl) {
     return (
       <OrgChartImageView
         imageUrl={chartData.signedImageUrl}
         chartName={chartData.name}
+        onChartChange={onChartChange}
       />
     );
   }
@@ -57,6 +65,7 @@ export function OrgChartContent({ chartData, members }: OrgChartContentProps) {
       initialEdges={chartData.edges}
       members={members}
       updatedAt={chartData.updatedAt ?? null}
+      onChartChange={onChartChange}
     />
   );
 }

apps/app/src/app/(app)/[orgId]/people/org-chart/components/OrgChartEditor.tsx

@@ -18,7 +18,6 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { formatDistanceToNow } from 'date-fns';
-import { useRouter } from 'next/navigation';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import type { OrgChartMember } from '../types';
@@ -30,16 +29,17 @@ interface OrgChartEditorProps {
   initialEdges: Edge[];
   members: OrgChartMember[];
   updatedAt: string | null;
+  onChartChange: () => void | Promise<unknown>;
 }
 
 export function OrgChartEditor({
   initialNodes,
   initialEdges,
   members,
   updatedAt,
+  onChartChange,
 }: OrgChartEditorProps) {
   const api = useApi();
-  const router = useRouter();
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null);
 
@@ -161,7 +161,12 @@ export function OrgChartEditor({
         setLastSavedAt(new Date().toISOString());
       }
       toast.success('Org chart saved');
-      router.refresh();
+
+      try {
+        await onChartChange();
+      } catch {
+        // Save already succeeded; a refresh failure shouldn't surface as a save error.
+      }
     } catch {
       toast.error('Failed to save org chart');
     } finally {

apps/app/src/app/(app)/[orgId]/people/org-chart/components/OrgChartEmptyState.tsx

@@ -9,9 +9,13 @@ import type { OrgChartMember } from '../types';
 
 interface OrgChartEmptyStateProps {
   members: OrgChartMember[];
+  onChartChange: () => void | Promise<unknown>;
 }
 
-export function OrgChartEmptyState({ members }: OrgChartEmptyStateProps) {
+export function OrgChartEmptyState({
+  members,
+  onChartChange,
+}: OrgChartEmptyStateProps) {
   const [mode, setMode] = useState<'empty' | 'create' | 'upload'>('empty');
 
   if (mode === 'create') {
@@ -21,12 +25,18 @@ export function OrgChartEmptyState({ members }: OrgChartEmptyStateProps) {
         initialEdges={[]}
         members={members}
         updatedAt={null}
+        onChartChange={onChartChange}
       />
     );
   }
 
   if (mode === 'upload') {
-    return <UploadOrgChartDialog onClose={() => setMode('empty')} />;
+    return (
+      <UploadOrgChartDialog
+        onClose={() => setMode('empty')}
+        onUploaded={onChartChange}
+      />
+    );
   }
 
   return (

apps/app/src/app/(app)/[orgId]/people/org-chart/components/OrgChartImageView.tsx

@@ -5,20 +5,20 @@ import { Button } from '@trycompai/design-system';
 import { TrashCan, Upload } from '@trycompai/design-system/icons';
 import { useApi } from '@/hooks/use-api';
 import { toast } from 'sonner';
-import { useRouter } from 'next/navigation';
 import { UploadOrgChartDialog } from './UploadOrgChartDialog';
 
 interface OrgChartImageViewProps {
   imageUrl: string;
   chartName: string;
+  onChartChange: () => void | Promise<unknown>;
 }
 
 export function OrgChartImageView({
   imageUrl,
   chartName,
+  onChartChange,
 }: OrgChartImageViewProps) {
   const api = useApi();
-  const router = useRouter();
   const [isDeleting, setIsDeleting] = useState(false);
   const [showReplace, setShowReplace] = useState(false);
 
@@ -33,7 +33,12 @@ export function OrgChartImageView({
       }
 
       toast.success('Org chart deleted');
-      router.refresh();
+
+      try {
+        await onChartChange();
+      } catch {
+        // Delete already succeeded; a refresh failure shouldn't surface as a delete error.
+      }
     } catch {
       toast.error('Failed to delete org chart');
     } finally {
@@ -42,7 +47,12 @@ export function OrgChartImageView({
   };
 
   if (showReplace) {
-    return <UploadOrgChartDialog onClose={() => setShowReplace(false)} />;
+    return (
+      <UploadOrgChartDialog
+        onClose={() => setShowReplace(false)}
+        onUploaded={onChartChange}
+      />
+    );
   }
 
   return (

apps/app/src/app/(app)/[orgId]/people/org-chart/components/OrgChartTabContent.tsx

@@ -10,7 +10,7 @@ interface OrgChartTabContentProps {
 }
 
 export function OrgChartTabContent({ organizationId }: OrgChartTabContentProps) {
-  const { orgChart } = useOrgChart();
+  const { orgChart, mutate } = useOrgChart();
   const { members } = useTeamMembers({ organizationId });
 
   const chartMembers: OrgChartMember[] = members
@@ -25,5 +25,11 @@ export function OrgChartTabContent({ organizationId }: OrgChartTabContentProps)
       jobTitle: m.jobTitle ?? null,
     }));
 
-  return <OrgChartContent chartData={orgChart} members={chartMembers} />;
+  return (
+    <OrgChartContent
+      chartData={orgChart}
+      members={chartMembers}
+      onChartChange={mutate}
+    />
+  );
 }

apps/app/src/app/(app)/[orgId]/people/org-chart/components/UploadOrgChartDialog.tsx

@@ -6,15 +6,17 @@ import { Button } from '@trycompai/design-system';
 import { Upload, Close } from '@trycompai/design-system/icons';
 import { useApi } from '@/hooks/use-api';
 import { toast } from 'sonner';
-import { useRouter } from 'next/navigation';
 
 interface UploadOrgChartDialogProps {
   onClose: () => void;
+  onUploaded: () => void | Promise<unknown>;
 }
 
-export function UploadOrgChartDialog({ onClose }: UploadOrgChartDialogProps) {
+export function UploadOrgChartDialog({
+  onClose,
+  onUploaded,
+}: UploadOrgChartDialogProps) {
   const api = useApi();
-  const router = useRouter();
   const [isUploading, setIsUploading] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
@@ -60,8 +62,13 @@ export function UploadOrgChartDialog({ onClose }: UploadOrgChartDialogProps) {
       }
 
       toast.success('Org chart uploaded');
-      router.refresh();
       onClose();
+
+      try {
+        await onUploaded();
+      } catch {
+        // Upload already succeeded; a refresh failure shouldn't surface as an upload error.
+      }
     } catch {
       toast.error('Failed to upload org chart');
     } finally {