feature/tab-warning-flag #44

Merged
admin merged 4 commits from feature/tab-warning-flag into master 2026-06-22 14:44:20 +03:30
4 changed files with 68 additions and 1 deletions
Showing only changes of commit 2f99abbb9e - Show all commits

View File

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
import { useToast } from '@/lib/hooks/useToast';
import { Check, Trash2, UserPlus, X } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { notifyPendingConnectionsChanged } from '@/lib/hooks/usePendingConnectionsCount';
import { useOrganizationInviteLinkCopy } from '@/lib/hooks/useOrganizationInviteLinkCopy';
import {
organizationApi,
@@ -246,6 +247,7 @@ export default function OrganizationsPage() {
toast.showSuccess(
action === 'ACCEPT' ? 'Connection request accepted.' : 'Connection request declined.',
);
notifyPendingConnectionsChanged();
await loadList();
} catch (e) {
toast.showError(formatApiMessage(e));

View File

@@ -13,6 +13,7 @@ import {
CreditCard,
} from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { usePendingConnectionsCount } from '@/lib/hooks/usePendingConnectionsCount';
import { canAccessAppointmentsSection, canViewTab } from '@/components/shared/permissions';
import {
counterpartOrganizationType,
@@ -32,6 +33,7 @@ const menu = [
function Sidebar() {
const pathname = usePathname();
const { currentOrganization } = useAuth();
const pendingConnectionsCount = usePendingConnectionsCount();
const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
const organizationsTabIcon = organizationTypeIcon(
counterpartOrganizationType(currentOrganization?.type),
@@ -75,6 +77,8 @@ function Sidebar() {
{visibleMenu.map((item) => {
const Icon = item.icon;
const isActive = pathname === item.path;
const showPendingBadge =
item.path === '/organizations' && pendingConnectionsCount > 0;
return (
<Link
@@ -88,7 +92,15 @@ function Sidebar() {
}`}
>
<Icon className="w-[18px] h-[18px] icon-flat" />
<span className="text-sm">{item.name}</span>
<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>
)}
</Link>
);
})}

View File

@@ -46,6 +46,11 @@ export const organizationApi = {
return response.data;
},
pendingIncomingCount: async (): Promise<{ success: boolean; data: { count: number } }> => {
const response = await apiClient.get('/organizations/connections/pending-count');
return response.data;
},
listInvitations: async (): Promise<{
success: boolean;
data: { items: OrganizationInvitationHistoryItemDto[] };

View File

@@ -0,0 +1,48 @@
'use client';
import { useCallback, useEffect, useState } from 'react';
import { usePathname } from 'next/navigation';
import { canViewTab } from '@/components/shared/permissions';
import { organizationApi } from '@/lib/api/organization';
import { useAuth } from '@/lib/hooks/useAuth';
/** Tell the sidebar badge to refetch after accept/decline on the organizations page. */
export function notifyPendingConnectionsChanged() {
window.dispatchEvent(new Event('pending-connections-changed'));
}
/**
* Sidebar-only: fetches GET /organizations/connections/pending-count.
* Independent from the organizations tab list API.
*/
export function usePendingConnectionsCount(): number {
const pathname = usePathname();
const { currentOrganization } = useAuth();
const [count, setCount] = useState(0);
const fetchCount = useCallback(async () => {
if (!currentOrganization?.id || !canViewTab(currentOrganization, 'TAB_ORGANIZATIONS_READ')) {
setCount(0);
return;
}
try {
const res = await organizationApi.pendingIncomingCount();
setCount(res.data.count);
} catch {
setCount(0);
}
}, [currentOrganization]);
useEffect(() => {
void fetchCount();
}, [fetchCount, pathname]);
useEffect(() => {
const onChanged = () => void fetchCount();
window.addEventListener('pending-connections-changed', onChanged);
return () => window.removeEventListener('pending-connections-changed', onChanged);
}, [fetchCount]);
return count;
}