feat(pricing): manage workspace member rates in edit flows

src/pages/Timesheet.tsx

@@ -1557,7 +1557,7 @@ function MobileRecordedEntryCard({
 
               <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500 dark:text-slate-400">
                 <span>{formatTimeOnly(entry.start_time)} - {formatTimeOnly(entry.end_time)}</span>
-                <span>{formatDateTime(entry.start_time, "en")}</span>
+                {/* <span>{formatDateTime(entry.start_time, "en")}</span> */}
               </div>
             </div>
 
@@ -1676,8 +1676,12 @@ export default function Timesheet() {
 
   const [timerDraft, setTimerDraft] = useState<TimerDraftState>(EMPTY_TIMER_DRAFT);
   const [isStartingTimer, setIsStartingTimer] = useState(false);
+  const desktopTimerRef = useRef<HTMLDivElement>(null);
+  const mobileTimerRef = useRef<HTMLDivElement>(null);
   const timerDraftSignatureRef = useRef(serializeTimerDraft(EMPTY_TIMER_DRAFT));
-  const timerSaveTimeoutRef = useRef<number | null>(null);
+  const pendingTimerSignatureRef = useRef<string | null>(serializeTimerDraft(EMPTY_TIMER_DRAFT));
+  const isTimerSavingRef = useRef(false);
+  const timerEditorOwnerId = "running-timer-editor";
 
   const [deleteModal, setDeleteModal] = useState<{ isOpen: boolean; entry: TimeEntry | null }>({
     isOpen: false,
@@ -1823,62 +1827,87 @@ export default function Timesheet() {
   useEffect(() => {
     if (!runningEntry) {
       timerDraftSignatureRef.current = serializeTimerDraft(EMPTY_TIMER_DRAFT);
+      pendingTimerSignatureRef.current = timerDraftSignatureRef.current;
       setTimerDraft(EMPTY_TIMER_DRAFT);
       return;
     }
 
     const nextDraft = buildTimerDraftState(runningEntry);
     timerDraftSignatureRef.current = serializeTimerDraft(nextDraft);
+    pendingTimerSignatureRef.current = timerDraftSignatureRef.current;
     setTimerDraft(nextDraft);
   }, [runningEntry]);
 
-  useEffect(() => {
+  const isInsideTimerEditorContext = useCallback((target: EventTarget | null) => {
+    if (!(target instanceof Node)) return false;
+    if (desktopTimerRef.current?.contains(target) || mobileTimerRef.current?.contains(target)) return true;
+    return target instanceof Element && Boolean(target.closest(`[data-entry-editor-owner="${timerEditorOwnerId}"]`));
+  }, [timerEditorOwnerId]);
+
+  const commitTimerDraft = useCallback(async () => {
     const saveErrorText = extendedTimesheet.saveError || "Failed to save time entry";
     const saveSuccessText = extendedTimesheet.saveSuccess || "Time entry saved";
 
-    if (!runningEntry) return;
+    if (!runningEntry) return false;
 
     const currentSignature = serializeTimerDraft(timerDraft);
-    if (currentSignature === timerDraftSignatureRef.current) return;
+    if (currentSignature === timerDraftSignatureRef.current) {
-
+      return false;
-    if (timerSaveTimeoutRef.current) {
-      window.clearTimeout(timerSaveTimeoutRef.current);
     }
 
-    timerSaveTimeoutRef.current = window.setTimeout(async () => {
+    if (isTimerSavingRef.current || pendingTimerSignatureRef.current === currentSignature) {
-      try {
+      return false;
-        const updatedEntry = await updateTimeEntry(runningEntry.id, {
+    }
-          description: timerDraft.description.trim(),
-          project_id: timerDraft.projectId || null,
-          tags: timerDraft.tags,
-          is_billable: timerDraft.isBillable,
-        });
 
-        const syncedDraft = buildTimerDraftState(updatedEntry);
+    isTimerSavingRef.current = true;
-        timerDraftSignatureRef.current = serializeTimerDraft(syncedDraft);
+    pendingTimerSignatureRef.current = currentSignature;
-        setTimerDraft(syncedDraft);
-        setActiveRunningEntry(updatedEntry);
-        toast.success(saveSuccessText);
-      } catch (error) {
-        console.error(error);
-        toast.error(saveErrorText);
-      }
-    }, 500);
 
-    return () => {
+    try {
-      if (timerSaveTimeoutRef.current) {
+      const updatedEntry = await updateTimeEntry(runningEntry.id, {
-        window.clearTimeout(timerSaveTimeoutRef.current);
+        description: timerDraft.description.trim(),
-      }
+        project_id: timerDraft.projectId || null,
-    };
+        tags: timerDraft.tags,
+        is_billable: timerDraft.isBillable,
+      });
+
+      const syncedDraft = buildTimerDraftState(updatedEntry);
+      const syncedSignature = serializeTimerDraft(syncedDraft);
+      timerDraftSignatureRef.current = syncedSignature;
+      pendingTimerSignatureRef.current = syncedSignature;
+      setTimerDraft(syncedDraft);
+      setActiveRunningEntry(updatedEntry);
+      toast.success(saveSuccessText);
+      return true;
+    } catch (error) {
+      console.error(error);
+      pendingTimerSignatureRef.current = null;
+      toast.error(saveErrorText);
+      return false;
+    } finally {
+      isTimerSavingRef.current = false;
+    }
   }, [extendedTimesheet.saveError, extendedTimesheet.saveSuccess, runningEntry, timerDraft]);
 
   useEffect(() => {
-    return () => {
+    if (!runningEntry) return;
-      if (timerSaveTimeoutRef.current) {
+
-        window.clearTimeout(timerSaveTimeoutRef.current);
+    const handlePointerDown = (event: MouseEvent) => {
-      }
+      if (isInsideTimerEditorContext(event.target)) return;
+      void commitTimerDraft();
     };
-  }, []);
+
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+    };
+  }, [commitTimerDraft, isInsideTimerEditorContext, runningEntry]);
+
+  const handleTimerBlurCapture = () => {
+    window.setTimeout(() => {
+      if (isInsideTimerEditorContext(document.activeElement)) return;
+      void commitTimerDraft();
+    }, 0);
+  };
 
   const closeCreateModal = () => {
     if (isSaving) return;
@@ -2096,10 +2125,6 @@ export default function Timesheet() {
 
     try {
       setIsDiscardingTimer(true);
-      if (timerSaveTimeoutRef.current) {
-        window.clearTimeout(timerSaveTimeoutRef.current);
-        timerSaveTimeoutRef.current = null;
-      }
 
       await deleteTimeEntry(discardTimerModal.entry.id);
       timerDraftSignatureRef.current = serializeTimerDraft(EMPTY_TIMER_DRAFT);
@@ -2129,7 +2154,11 @@ export default function Timesheet() {
         </h1>
       </div>
 
-      <div className="mb-4 hidden overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950 md:block">
+      <div
+        ref={desktopTimerRef}
+        onBlurCapture={handleTimerBlurCapture}
+        className="mb-4 hidden overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950 md:block"
+      >
         <div className="flex min-w-[1040px] items-center h-20 px-3">
           <div className="min-w-[360px] flex-1">
             <Input
@@ -2152,6 +2181,7 @@ export default function Timesheet() {
               className="min-w-[170px]"
               buttonClassName="h-12 w-full rounded-none border-0 bg-transparent px-3 text-sm text-sky-600 shadow-none outline-none dark:bg-transparent dark:text-sky-400 focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
               disabled={isStartingTimer}
+              portalOwnerId={timerEditorOwnerId}
             />
           </div>
 
@@ -2165,6 +2195,7 @@ export default function Timesheet() {
               emptyHint={t.timesheet?.noTagsHint || "Create tags first from the Tags page."}
               title={t.tags?.title || "Tags"}
               compact
+              portalOwnerId={timerEditorOwnerId}
             />
           </div>
 
@@ -2224,7 +2255,11 @@ export default function Timesheet() {
         </div>
       </div>
 
-      <div className="mb-4 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-800 dark:bg-slate-950 md:hidden">
+      <div
+        ref={mobileTimerRef}
+        onBlurCapture={handleTimerBlurCapture}
+        className="mb-4 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-800 dark:bg-slate-950 md:hidden"
+      >
         <div className="space-y-3">
           <Input
             value={timerDraft.description}
@@ -2245,6 +2280,7 @@ export default function Timesheet() {
               className="w-full"
               buttonClassName="h-10 w-full rounded-md border border-slate-200 bg-slate-50 px-3 text-sm shadow-none outline-none dark:border-slate-700 dark:bg-slate-900 focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
               disabled={isStartingTimer}
+              portalOwnerId={timerEditorOwnerId}
             />
 
             <div className="flex h-10 min-w-[110px] items-center justify-center rounded-md border border-slate-200 bg-slate-50 px-3 text-sm font-semibold text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-white">
@@ -2263,6 +2299,7 @@ export default function Timesheet() {
                 emptyHint={t.timesheet?.noTagsHint || "Create tags first from the Tags page."}
                 title={t.tags?.title || "Tags"}
                 compact
+                portalOwnerId={timerEditorOwnerId}
               />
 
               <BillableIconButton