diff --git a/client/components/layout/NavPill.jsx b/client/components/layout/NavPill.jsx index 8ca4c7a..6aa98cb 100644 --- a/client/components/layout/NavPill.jsx +++ b/client/components/layout/NavPill.jsx @@ -1,8 +1,9 @@ import React, { useMemo } from 'react'; import { NavLink } from 'react-router-dom'; import { cn } from '@/lib/utils'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; -export const NavPill = React.memo(function NavPill({ item, onNavigate, badge }) { +export const NavPill = React.memo(function NavPill({ item, onNavigate, badge, badgeNames = [] }) { const Icon = useMemo(() => item.icon, [item.icon]); const to = useMemo(() => item.to, [item.to]); const end = useMemo(() => item.end, [item.end]); @@ -24,9 +25,24 @@ export const NavPill = React.memo(function NavPill({ item, onNavigate, badge }) {label} {badge > 0 && ( - - {badge > 99 ? '99+' : badge} - + + + + + {badge > 99 ? '99+' : badge} + + + +

{badge} past due

+ {badgeNames.slice(0, 5).map(name => ( +

· {name}

+ ))} + {badgeNames.length > 5 && ( +

+{badgeNames.length - 5} more

+ )} +
+
+
)} ); diff --git a/client/components/layout/Sidebar.jsx b/client/components/layout/Sidebar.jsx index 8b27447..4df2744 100644 --- a/client/components/layout/Sidebar.jsx +++ b/client/components/layout/Sidebar.jsx @@ -10,6 +10,7 @@ import { useAuth } from '@/hooks/useAuth'; import { useOverdueCount } from '@/hooks/useQueries'; import { ThemeToggle } from '@/components/ui/theme-toggle'; import { Button } from '@/components/ui/button'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; import { DropdownMenu, DropdownMenuContent, @@ -44,7 +45,7 @@ const trackerItems = [ { to: '/payoff', icon: Calculator, label: 'Payoff' }, ]; -function TrackerMenu({ onNavigate, badge }) { +function TrackerMenu({ onNavigate, badge, badgeNames = [] }) { const location = useLocation(); const navigate = useNavigate(); const isTrackerActive = useMemo(() => trackerItems.some(item => ( @@ -68,9 +69,24 @@ function TrackerMenu({ onNavigate, badge }) { Tracker {badge > 0 && ( - - {badge > 99 ? '99+' : badge} - + + + + + {badge > 99 ? '99+' : badge} + + + +

{badge} past due

+ {badgeNames.slice(0, 5).map(name => ( +

· {name}

+ ))} + {badgeNames.length > 5 && ( +

+{badgeNames.length - 5} more

+ )} +
+
+
)} @@ -178,6 +194,7 @@ export default function Sidebar({ adminMode = false }) { const items = useMemo(() => adminMode ? adminNavItems : userNavItems, [adminMode]); const { data: overdueData } = useOverdueCount(); const overdueCount = (!adminMode && overdueData?.count) ? overdueData.count : 0; + const overdueNames = (!adminMode && overdueData?.names) ? overdueData.names : []; return (
@@ -185,7 +202,7 @@ export default function Sidebar({ adminMode = false }) {