improvement: notify counter badge added to treatment and tasks tabs for upadted and edited cases.

2026-07-13 17:44:44 +03:30
parent 547457d637
commit 2ad572f4c8
33 changed files with 908 additions and 31 deletions
--- a/frontend/src/components/ui/lab/CasesPage.tsx
+++ b/frontend/src/components/ui/lab/CasesPage.tsx
@@ -14,6 +14,8 @@ import {
  formatPatientName,
 } from '@/components/lab/caseDetailUtils';
 import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
+import { notificationsApi } from '@/lib/api/notifications';
+import { notifyTabBadgesChanged } from '@/lib/tabBadgeUtils';
 import { casesApi } from '@/lib/api/cases';
 import { tasksApi } from '@/lib/api/tasks';
 import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
@@ -184,6 +186,14 @@ export function CasesPage() {
  useEffect(() => {
    if (selectedCaseId) {
      void loadDetail(selectedCaseId);
+      void notificationsApi.markCaseRead(selectedCaseId).then(() => {
+        notifyTabBadgesChanged();
+        setCases((prev) =>
+          prev.map((item) =>
+            item.id === selectedCaseId ? { ...item, hasUnread: false } : item,
+          ),
+        );
+      });
      void tasksApi
        .listComments(selectedCaseId)
        .then((r) => setCommentCount(r.data.length))
@@ -244,6 +254,7 @@ export function CasesPage() {
          item.id === selectedCaseId ? { ...item, isImportant: response.data.isImportant } : item,
        ),
      );
+      notifyTabBadgesChanged();
    } catch (error: unknown) {
      setSelectedCase(previousCase);
      toast.showError(getUserFacingError(error, tErrors, t('errorUpdateTask')));
@@ -373,19 +384,27 @@ export function CasesPage() {
                            : 'border-border hover:border-primary/40'
                        }`}
                      >
-                        <div className="flex flex-wrap items-center gap-1.5">
-                          <div className="font-medium text-text-primary">
-                            {formatPatientName(item.patient)}
+                        <div className="flex items-center gap-2">
+                          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+                            <div className="font-medium text-text-primary">
+                              {formatPatientName(item.patient)}
+                            </div>
+                            <LabCaseDueDateBadge
+                              dueDate={item.dueDate}
+                              locale={locale}
+                              className="text-[10px]"
+                            />
+                            {item.isImportant ? (
+                              <Badge variant="warning" fixedWidth={false}>
+                                {t('importantLabel')}
+                              </Badge>
+                            ) : null}
                          </div>
-                          <LabCaseDueDateBadge
-                            dueDate={item.dueDate}
-                            locale={locale}
-                            className="text-[10px]"
-                          />
-                          {item.isImportant ? (
-                            <Badge variant="warning" fixedWidth={false}>
-                              {t('importantLabel')}
-                            </Badge>
+                          {item.hasUnread ? (
+                            <span
+                              className="h-2 w-2 shrink-0 rounded-full bg-badge-warning-fg"
+                              aria-label={t('unreadCase')}
+                            />
                          ) : null}
                        </div>
                        <div className="text-xs text-text-muted mt-0.5">
@@ -495,6 +514,7 @@ export function CasesPage() {
                          visibleToClinic,
                        });
                        setCommentCount((n) => n + 1);
+                        notifyTabBadgesChanged();
                        return r.data;
                      }}
                      onToggleVisibility={async (commentId, visible) => {
--- a/frontend/src/components/ui/lab/TaskRow.tsx
+++ b/frontend/src/components/ui/lab/TaskRow.tsx
@@ -12,6 +12,7 @@ import {
  labTaskStatusVariant,
 } from '@/components/lab/labTaskStatusDisplay';
 import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
+import { notifyTabBadgesChanged } from '@/lib/tabBadgeUtils';
 import {
  formatToothList,
  prosthesisTypeBadgeStyleFromCatalog,
@@ -228,6 +229,7 @@ export function TaskRow({
                body,
                visibleToClinic,
              });
+              notifyTabBadgesChanged();
              return r.data;
            }}
            onToggleVisibility={async (commentId, visible) => {
--- a/frontend/src/components/ui/lab/TasksPage.tsx
+++ b/frontend/src/components/ui/lab/TasksPage.tsx
@@ -16,6 +16,8 @@ import {
  isDefaultTasksView,
  TASK_COMPLETE_EXIT_MS,
 } from '@/components/lab/tasksViewDefaults';
+import { useMarkTabReadOnVisit } from '@/lib/hooks/useTabBadgeCounts';
+import { notifyTabBadgesChanged } from '@/lib/tabBadgeUtils';
 import { scrollWithinMainScrollContainer } from '@/components/shared/scrollWithinMain';
 import { getUserFacingError } from '@/components/shared/formatApiError';
 import { canEditTasks, canViewTasks } from '@/components/shared/permissions';
@@ -78,6 +80,7 @@ export function TasksPage() {
  const canView = canViewTasks(currentOrganization);
  const canEdit = canEditTasks(currentOrganization);
  const locale = user?.language ?? 'en';
+  useMarkTabReadOnVisit();

  const tRef = useRef(t);
  tRef.current = t;
@@ -273,6 +276,7 @@ export function TasksPage() {
        } else {
          await loadTasks();
        }
+        notifyTabBadgesChanged();
      } catch (error: unknown) {
        showError(getUserFacingError(error, tErrors, t('errorUpdateTask')));
      } finally {
--- a/frontend/src/components/ui/shared/NavBadgePill.tsx
+++ b/frontend/src/components/ui/shared/NavBadgePill.tsx
@@ -0,0 +1,17 @@
+interface NavBadgePillProps {
+  count: number;
+  ariaLabel: string;
+}
+
+export function NavBadgePill({ count, ariaLabel }: NavBadgePillProps) {
+  if (count <= 0) return null;
+
+  return (
+    <span
+      className="min-w-[1.25rem] rounded-full bg-badge-warning-bg px-1.5 py-0.5 text-center text-xs font-medium tabular-nums text-badge-warning-fg border border-badge-warning-border"
+      aria-label={ariaLabel}
+    >
+      {count > 99 ? '99+' : count}
+    </span>
+  );
+}
--- a/frontend/src/components/ui/shared/Sidebar.tsx
+++ b/frontend/src/components/ui/shared/Sidebar.tsx
@@ -18,6 +18,9 @@ import {
 import type { OrgTypeName } from '@/components/shared/permissions';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { usePendingConnectionsCount } from '@/lib/hooks/usePendingConnectionsCount';
+import { useTabBadgeCounts } from '@/lib/hooks/useTabBadgeCounts';
+import { badgeCountForPath } from '@/lib/tabBadgeUtils';
+import { NavBadgePill } from '@/components/ui/shared/NavBadgePill';
 import {
  canViewAppointmentsTab,
  canViewCases,
@@ -48,6 +51,7 @@ function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
  const pathname = usePathname();
  const { currentOrganization } = useAuth();
  const pendingConnectionsCount = usePendingConnectionsCount();
+  const tabBadgeCounts = useTabBadgeCounts();
  const orgType = currentOrganization?.type;

  const menu = useMemo((): MenuItem[] => {
@@ -119,6 +123,7 @@ function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
          const isActive = pathname === item.path;
          const showPendingBadge =
            item.path === '/organizations' && pendingConnectionsCount > 0;
+          const tabBadgeCount = badgeCountForPath(tabBadgeCounts, item.path);

          return (
            <Link
@@ -134,14 +139,13 @@ function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
            >
              <Icon className="w-[18px] h-[18px] icon-flat" />
              <span className="text-sm flex-1">{item.name}</span>
-              {showPendingBadge && (
-                <span
-                  className="min-w-[1.25rem] rounded-full bg-badge-warning-bg px-1.5 py-0.5 text-center text-xs font-medium tabular-nums text-badge-warning-fg border border-badge-warning-border"
-                  aria-label={`${pendingConnectionsCount} pending connection requests`}
-                >
-                  {pendingConnectionsCount}
-                </span>
-              )}
+              {showPendingBadge ? (
+                <NavBadgePill
+                  count={pendingConnectionsCount}
+                  ariaLabel={`${pendingConnectionsCount} pending connection requests`}
+                />
+              ) : null}
+              <NavBadgePill count={tabBadgeCount} ariaLabel={`${tabBadgeCount} unread updates`} />
            </Link>
          );
        })}
--- a/frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
+++ b/frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
@@ -35,6 +35,9 @@ import type { LabDispatchAttentionItem } from '@/components/treatment/labDispatc
 import { collectLabDispatchAttention } from '@/components/treatment/labDispatchAttention';
 import { canEditTreatment, canViewTreatment, canAccessDashboardRoute } from '@/components/shared/permissions';
 import { scrollWithinMainScrollContainer } from '@/components/shared/scrollWithinMain';
+import { useMarkTabReadOnVisit } from '@/lib/hooks/useTabBadgeCounts';
+import { notificationsApi } from '@/lib/api/notifications';
+import { notifyTabBadgesChanged } from '@/lib/tabBadgeUtils';
 import { getUserFacingError } from '@/components/shared/formatApiError';
 import { useToast } from '@/lib/hooks/useToast';
 import type { Organization } from '@/types/organization';
@@ -275,6 +278,7 @@ export function TreatmentWorkspace({
  const { showError, showSuccess, messages: toastMessages } = useToast();
  const canView = canViewTreatment(currentOrganization);
  const canEdit = canEditTreatment(currentOrganization);
+  useMarkTabReadOnVisit();

  const [stripHidden, setStripHidden] = useState(false);
  const todayStart = useMemo(() => startOfLocalDay(new Date()), []);
@@ -346,6 +350,18 @@ export function TreatmentWorkspace({
    [labCaseDrafts],
  );

+  const activeSentLabCaseId = useMemo(() => {
+    const match = labCaseDrafts.find(
+      (lc) => lc.detailClientId === activeDetailId && lc.sentAt && lc.id,
+    );
+    return match?.id ?? null;
+  }, [labCaseDrafts, activeDetailId]);
+
+  useEffect(() => {
+    if (!activeSentLabCaseId) return;
+    void notificationsApi.markCaseRead(activeSentLabCaseId).then(() => notifyTabBadgesChanged());
+  }, [activeSentLabCaseId]);
+
  const isDirty = useMemo(
    () => isDetailsDirty(details, savedSnapshot),
    [details, savedSnapshot],
@@ -1205,6 +1221,7 @@ export function TreatmentWorkspace({
          return [orgId, ...prev.filter((id) => id !== orgId)].slice(0, 10);
        });
        showSuccess(t('successCaseSent'));
+        notifyTabBadgesChanged();
      } catch (error: unknown) {
        showError(getUserFacingError(error, tErrors, t('errorSendCase')));
      } finally {