DI2: навигация сайдбара на wouter Link — base /di2 подставляется в href и клики не покидают субапп (прямые <a href> уводили на iistwin)

This commit is contained in:
2026-09-06 20:53:44 +03:00
parent f993c4d1f0
commit 6bcf4dfdfc

View File

@@ -1,5 +1,5 @@
import { useCallback } from "react"; import { useCallback } from "react";
import { useLocation } from "wouter"; import { useLocation, Link } from "wouter";
import { queryClient } from "@/lib/queryClient"; import { queryClient } from "@/lib/queryClient";
import { import {
Sidebar, Sidebar,
@@ -50,91 +50,91 @@ export function AppSidebar() {
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={location === "/"}> <SidebarMenuButton asChild isActive={location === "/"}>
<a href="/" data-testid="nav-dashboard" onMouseEnter={() => prefetch(["/api/di2/dashboard"])}> <Link href="/" data-testid="nav-dashboard" onMouseEnter={() => prefetch(["/api/di2/dashboard"])}>
<LayoutDashboard className="w-4 h-4" /> <LayoutDashboard className="w-4 h-4" />
<span>Дашборд</span> <span>Дашборд</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={isIncomeSection}> <SidebarMenuButton asChild isActive={isIncomeSection}>
<a href="/income" data-testid="nav-income" onMouseEnter={() => prefetch(["/api/income/tree-summary"])}> <Link href="/income" data-testid="nav-income" onMouseEnter={() => prefetch(["/api/income/tree-summary"])}>
<TrendingUp className="w-4 h-4" /> <TrendingUp className="w-4 h-4" />
<span>Доходы</span> <span>Доходы</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={location === "/profitability"}> <SidebarMenuButton asChild isActive={location === "/profitability"}>
<a href="/profitability" data-testid="nav-profitability"> <Link href="/profitability" data-testid="nav-profitability">
<Handshake className="w-4 h-4" /> <Handshake className="w-4 h-4" />
<span>Прибыльность</span> <span>Прибыльность</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={isExpenseSection}> <SidebarMenuButton asChild isActive={isExpenseSection}>
<a href="/expenses" data-testid="nav-expenses" onMouseEnter={() => prefetch(["/api/expense-categories"])}> <Link href="/expenses" data-testid="nav-expenses" onMouseEnter={() => prefetch(["/api/expense-categories"])}>
<Wallet className="w-4 h-4" /> <Wallet className="w-4 h-4" />
<span>Расходы</span> <span>Расходы</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={location === "/debt"}> <SidebarMenuButton asChild isActive={location === "/debt"}>
<a href="/debt" data-testid="nav-debt" onMouseEnter={() => prefetch(["/api/debt/filters", "/api/debt/analytics"])}> <Link href="/debt" data-testid="nav-debt" onMouseEnter={() => prefetch(["/api/debt/filters", "/api/debt/analytics"])}>
<AlertCircle className="w-4 h-4" /> <AlertCircle className="w-4 h-4" />
<span>Дебиторская задолженность</span> <span>Дебиторская задолженность</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={location === "/calculations"}> <SidebarMenuButton asChild isActive={location === "/calculations"}>
<a href="/calculations" data-testid="nav-calculations"> <Link href="/calculations" data-testid="nav-calculations">
<Calculator className="w-4 h-4" /> <Calculator className="w-4 h-4" />
<span>Расчеты</span> <span>Расчеты</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={location === "/planning"}> <SidebarMenuButton asChild isActive={location === "/planning"}>
<a href="/planning" data-testid="nav-planning"> <Link href="/planning" data-testid="nav-planning">
<CalendarRange className="w-4 h-4" /> <CalendarRange className="w-4 h-4" />
<span>Планирование</span> <span>Планирование</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={location === "/salary"}> <SidebarMenuButton asChild isActive={location === "/salary"}>
<a href="/salary" data-testid="nav-salary"> <Link href="/salary" data-testid="nav-salary">
<Banknote className="w-4 h-4" /> <Banknote className="w-4 h-4" />
<span>Зарплата</span> <span>Зарплата</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={location === "/audit"}> <SidebarMenuButton asChild isActive={location === "/audit"}>
<a href="/audit" data-testid="nav-audit"> <Link href="/audit" data-testid="nav-audit">
<ShieldCheck className="w-4 h-4" /> <ShieldCheck className="w-4 h-4" />
<span>Аудит данных</span> <span>Аудит данных</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild isActive={location === "/heatmap"}> <SidebarMenuButton asChild isActive={location === "/heatmap"}>
<a href="/heatmap" data-testid="nav-heatmap"> <Link href="/heatmap" data-testid="nav-heatmap">
<Grid3X3 className="w-4 h-4" /> <Grid3X3 className="w-4 h-4" />
<span>Тепловая карта</span> <span>Тепловая карта</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
@@ -148,10 +148,10 @@ export function AppSidebar() {
{settingsItems.map((item) => ( {settingsItems.map((item) => (
<SidebarMenuItem key={item.title}> <SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={location === item.url}> <SidebarMenuButton asChild isActive={location === item.url}>
<a href={item.url} data-testid="nav-settings"> <Link href={item.url} data-testid="nav-settings">
<item.icon className="w-4 h-4" /> <item.icon className="w-4 h-4" />
<span>{item.title}</span> <span>{item.title}</span>
</a> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
))} ))}