feat: some ui updates

app/dashboard/[workspaceId]/analytics/creatives/page.tsx

@@ -54,6 +54,25 @@ const formatNumber = (value: number | null) => {
   return new Intl.NumberFormat("ru-RU").format(value);
 };
 
+const getCreativeWord = (count: number): string => {
+  const mod10 = count % 10;
+  const mod100 = count % 100;
+  
+  if (mod100 >= 11 && mod100 <= 14) {
+    return "креативов";
+  }
+  
+  if (mod10 === 1) {
+    return "креатив";
+  }
+  
+  if (mod10 >= 2 && mod10 <= 4) {
+    return "креатива";
+  }
+  
+  return "креативов";
+};
+
 // ============================================================================
 // Types
 // ============================================================================
@@ -198,7 +217,7 @@ export default function CreativesAnalyticsPage() {
             <CardHeader>
               <CardTitle>Креативы</CardTitle>
               <CardDescription>
-                {sortedCreatives.length} креативов с размещениями
+                {sortedCreatives.length} {getCreativeWord(sortedCreatives.length)} с размещениями
               </CardDescription>
             </CardHeader>
             <Table>

app/dashboard/[workspaceId]/creatives/page.tsx

@@ -92,6 +92,25 @@ const formatCurrency = (value: number | null | undefined): string => {
   }).format(value);
 };
 
+const getCreativeWord = (count: number): string => {
+  const mod10 = count % 10;
+  const mod100 = count % 100;
+  
+  if (mod100 >= 11 && mod100 <= 14) {
+    return "креативов";
+  }
+  
+  if (mod10 === 1) {
+    return "креатив";
+  }
+  
+  if (mod10 >= 2 && mod10 <= 4) {
+    return "креатива";
+  }
+  
+  return "креативов";
+};
+
 // ============================================================================
 // Component
 // ============================================================================
@@ -217,7 +236,7 @@ export default function CreativesPage() {
           <div>
             <h1 className="text-2xl font-bold tracking-tight">Креативы</h1>
             <p className="text-muted-foreground">
-              {filteredCreatives.length} креативов • {formatCurrency(totals.cost)} •{" "}
+              {filteredCreatives.length} {getCreativeWord(filteredCreatives.length)} • {formatCurrency(totals.cost)} •{" "}
               {formatNumber(totals.subscriptions)} подписчиков
             </p>
           </div>

app/dashboard/[workspaceId]/page.tsx

@@ -28,12 +28,20 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { DateRange } from "react-day-picker";
+type DateRangeType = {
+  from?: Date;
+  to?: Date;
+} | undefined;
 import { DashboardHeader } from "@/components/layout/dashboard-header";
 import { useWorkspace } from "@/components/providers/workspace-provider";
 import { demoAwareAnalyticsApi } from "@/lib/demo";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
@@ -110,7 +118,7 @@ export default function DashboardPage() {
   const [cpfMode, setCpfMode] = useState<"top" | "worst">("top");
   const [projectPage, setProjectPage] = useState(1);
   const pageSize = 5;
-  const [dateRange, setDateRange] = useState<DateRange | undefined>(() => ({
+  const [dateRange, setDateRange] = useState<DateRangeType | undefined>(() => ({
     from: subDays(new Date(), 29),
     to: new Date(),
   }));
@@ -323,15 +331,15 @@ export default function DashboardPage() {
                 numberOfMonths={2}
                 locale={ru}
                 defaultMonth={dateRange?.from}
-                selected={dateRange}
+                selected={dateRange as any}
-                onSelect={(range) => setDateRange(range)}
+                onSelect={(range: any) => setDateRange(range)}
               />
             </PopoverContent>
           </Popover>
         </div>
 
         {/* Строка 1 — компактные показатели */}
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
           {stats.map((item) => (
             <Card key={item.title} className="border-border/70">
               <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2">
@@ -371,36 +379,36 @@ export default function DashboardPage() {
                   config={{
                     subscriptions_delta: {
                       label: "Δ подписок",
-                      color: "hsl(var(--chart-1))",
                     },
-                  }}
+                  } satisfies ChartConfig}
                   className="aspect-auto h-[260px] w-full"
                 >
-                  <BarChart data={subscriptionsChartData} margin={{ left: 8, right: 8, top: 8 }}>
+                  <BarChart accessibilityLayer data={subscriptionsChartData}>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <CartesianGrid vertical={false} />
-                    <XAxis dataKey="dateLabel" tickLine={false} axisLine={false} tickMargin={8} />
+                    <XAxis
+                      dataKey="dateLabel"
+                      tickLine={false}
+                      axisLine={false}
+                      tickMargin={10}
+                    />
                     <YAxis tickLine={false} axisLine={false} tickMargin={8} />
-                    <ReferenceLine y={0} stroke="#cbd5e1" />
+                    <ReferenceLine y={0} stroke="hsl(var(--border))" />
-                    <Bar
+                    <ChartTooltip
-                      dataKey="value"
+                      cursor={false}
-                      radius={[4, 4, 0, 0]}
+                      content={<ChartTooltipContent hideLabel hideIndicator />}
-                      label={false}
+                    />
-                    >
+                    <Bar dataKey="value" radius={8}>
                       {subscriptionsChartData.map((entry) => (
                         <Cell
                           key={`cell-${entry.date}`}
-                          fill={entry.value >= 0 ? "#22c55e" : "#ef4444"}
+                          fill={
+                            entry.value >= 0
+                              ? "var(--chart-1)"
+                              : "var(--chart-2)"
+                          }
                         />
                       ))}
                     </Bar>
-                    <ChartTooltip
-                      content={
-                        <ChartTooltipContent
-                          labelFormatter={(_, payload) => payload?.[0]?.payload?.date || ""}
-                          formatter={(value: number) => [formatNumber(value, true), "Δ подписок"]}
-                        />
-                      }
-                    />
                   </BarChart>
                 </ChartContainer>
               )}
@@ -422,29 +430,30 @@ export default function DashboardPage() {
                   config={{
                     cost: {
                       label: "Затраты",
-                      color: "hsl(var(--chart-2))",
+                      color: "var(--chart-2)",
                     },
-                  }}
+                  } satisfies ChartConfig}
                   className="aspect-auto h-[260px] w-full"
                 >
-                  <BarChart data={costChartData} margin={{ left: 8, right: 8, top: 8 }}>
+                  <BarChart accessibilityLayer data={costChartData}>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <CartesianGrid vertical={false} />
-                    <XAxis dataKey="dateLabel" tickLine={false} axisLine={false} tickMargin={8} />
+                    <XAxis
+                      dataKey="dateLabel"
+                      tickLine={false}
+                      axisLine={false}
+                      tickMargin={10}
+                    />
                     <YAxis
                       tickLine={false}
                       axisLine={false}
                       tickMargin={8}
                       tickFormatter={(value: number) => formatCurrency(value, 0)}
                     />
-                    <Bar dataKey="value" fill="var(--color-cost)" radius={[4, 4, 0, 0]} />
                     <ChartTooltip
-                      content={
+                      cursor={false}
-                        <ChartTooltipContent
+                      content={<ChartTooltipContent hideLabel />}
-                          labelFormatter={(_, payload) => payload?.[0]?.payload?.date || ""}
-                          formatter={(value: number) => [formatCurrency(value, 0), "Затраты"]}
-                        />
-                      }
                     />
+                    <Bar dataKey="value" fill="var(--color-cost)" radius={8} />
                   </BarChart>
                 </ChartContainer>
               )}
@@ -466,29 +475,30 @@ export default function DashboardPage() {
                   config={{
                     cpf: {
                       label: "CPF",
-                      color: "hsl(var(--chart-3))",
+                      color: "var(--chart-3)",
                     },
-                  }}
+                  } satisfies ChartConfig}
                   className="aspect-auto h-[260px] w-full"
                 >
-                  <BarChart data={cpfChartData} margin={{ left: 8, right: 8, top: 8 }}>
+                  <BarChart accessibilityLayer data={cpfChartData}>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <CartesianGrid vertical={false} />
-                    <XAxis dataKey="dateLabel" tickLine={false} axisLine={false} tickMargin={8} />
+                    <XAxis
+                      dataKey="dateLabel"
+                      tickLine={false}
+                      axisLine={false}
+                      tickMargin={10}
+                    />
                     <YAxis
                       tickLine={false}
                       axisLine={false}
                       tickMargin={8}
                       tickFormatter={(value: number) => formatCurrency(value, 0)}
                     />
-                    <Bar dataKey="value" fill="var(--color-cpf)" radius={[4, 4, 0, 0]} />
                     <ChartTooltip
-                      content={
+                      cursor={false}
-                        <ChartTooltipContent
+                      content={<ChartTooltipContent hideLabel />}
-                          labelFormatter={(_, payload) => payload?.[0]?.payload?.date || ""}
-                          formatter={(value: number) => [formatCurrency(value, 2), "CPF"]}
-                        />
-                      }
                     />
+                    <Bar dataKey="value" fill="var(--color-cpf)" radius={8} />
                   </BarChart>
                 </ChartContainer>
               )}

components/layout/app-sidebar.tsx

@@ -99,6 +99,7 @@ interface NavItem {
   items?: {
     title: string;
     url: string;
+    icon?: LucideIcon;
   }[];
 }
 
@@ -325,6 +326,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     hasPermission,
     isAdmin,
     createWorkspace,
+    isDemoMode,
   } = useWorkspace();
   const { state: sidebarState } = useSidebar();
   const isSidebarCollapsed = sidebarState === "collapsed";
@@ -422,10 +424,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           {
             title: "По проектам",
             url: buildRoute.analytics(workspaceId),
+            icon: Tv,
           },
           {
             title: "По креативам",
             url: buildRoute.analyticsCreatives(workspaceId),
+            icon: Folder,
           },
         ],
       });
@@ -777,7 +781,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 workspaces,
                 currentWorkspaceId: currentWorkspace?.id,
                 onSelect: (workspace) => handleWorkspaceSelect(workspace.id),
-                onCreate: () => setShowCreateDialog(true),
+                onCreate: isDemoMode ? undefined : () => setShowCreateDialog(true),
               }}
             />
           )}

components/nav-main.tsx

@@ -45,6 +45,7 @@ export function NavMain({
     items?: {
       title: string;
       url: string;
+      icon?: LucideIcon;
     }[];
   }[];
   guideState?: NavGuideState;
@@ -79,7 +80,15 @@ export function NavMain({
                       isActive={isActive || hasActiveSubmenu}
                       className={cn(highlightedButtonClass)}
                     >
-                      {item.icon && <item.icon />}
+                      {item.icon && (
+                        <item.icon
+                          className={cn(
+                            "h-4 w-4",
+                            (isActive || hasActiveSubmenu) &&
+                              "text-[#2B1D49] dark:text-[#5F31F4]"
+                          )}
+                        />
+                      )}
                       <span>{item.title}</span>
                     </SidebarMenuButton>
                   </DropdownMenuTrigger>
@@ -94,13 +103,23 @@ export function NavMain({
                         <DropdownMenuItem key={subItem.title} asChild>
                           <Link
                             href={subItem.url}
-                            className={
+                            className={cn(
+                              "flex items-center gap-2",
                               isSubActive
                                 ? "bg-accent text-accent-foreground"
                                 : ""
-                            }
+                            )}
                           >
-                            {subItem.title}
+                            {subItem.icon && (
+                              <subItem.icon
+                                className={cn(
+                                  "h-4 w-4",
+                                  isSubActive &&
+                                    "text-[#2B1D49] dark:text-[#5F31F4]"
+                                )}
+                              />
+                            )}
+                            <span>{subItem.title}</span>
                           </Link>
                         </DropdownMenuItem>
                       );
@@ -130,7 +149,15 @@ export function NavMain({
                         isActive={isActive || hasActiveSubmenu}
                         className={cn(highlightedButtonClass)}
                       >
-                        {item.icon && <item.icon />}
+                        {item.icon && (
+                          <item.icon
+                            className={cn(
+                              "h-4 w-4",
+                              (isActive || hasActiveSubmenu) &&
+                                "text-[#2B1D49] dark:text-[#5F31F4]"
+                            )}
+                          />
+                        )}
                         <span>{item.title}</span>
                         <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                       </SidebarMenuButton>
@@ -145,7 +172,16 @@ export function NavMain({
                                 asChild
                                 isActive={isSubActive}
                               >
-                                <Link href={subItem.url}>
+                                <Link href={subItem.url} className="flex items-center gap-2">
+                                  {subItem.icon && (
+                                    <subItem.icon
+                                      className={cn(
+                                        "h-4 w-4",
+                                        isSubActive &&
+                                          "text-[#2B1D49] dark:text-[#5F31F4]"
+                                      )}
+                                    />
+                                  )}
                                   <span>{subItem.title}</span>
                                 </Link>
                               </SidebarMenuSubButton>
@@ -162,8 +198,16 @@ export function NavMain({
                     isActive={isActive}
                     className={cn(highlightedButtonClass)}
                   >
-                    <Link href={item.url}>
+                    <Link href={item.url} className="flex items-center gap-2">
-                      {item.icon && <item.icon />}
+                      {item.icon && (
+                        <item.icon
+                          className={cn(
+                            "h-4 w-4",
+                            isActive &&
+                              "text-[#2B1D49] dark:text-[#5F31F4]"
+                          )}
+                        />
+                      )}
                       <span>{item.title}</span>
                     </Link>
                   </SidebarMenuButton>

components/nav-user.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Building2, Check, LogOut, Plus } from "lucide-react";
+import { Building2, Check, LogOut, Plus, Sparkles } from "lucide-react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/sidebar";
 import { useAuth } from "@/components/auth/auth-provider";
 import type { Workspace } from "@/lib/types/api";
+import { DEMO_WORKSPACE_ID } from "@/lib/demo";
 
 export function NavUser({
   user,
@@ -104,21 +105,35 @@ export function NavUser({
                   Воркспейсы
                 </DropdownMenuLabel>
                 {workspaceSwitcher.workspaces.length > 0 ? (
-                  workspaceSwitcher.workspaces.map((workspace) => (
+                  workspaceSwitcher.workspaces.map((workspace) => {
-                    <DropdownMenuItem
+                    const isDemo = workspace.id === DEMO_WORKSPACE_ID;
-                      key={workspace.id}
+                    return (
-                      onClick={() => workspaceSwitcher.onSelect(workspace)}
+                      <DropdownMenuItem
-                      className="gap-2 p-2 text-sm"
+                        key={workspace.id}
-                    >
+                        onClick={() => workspaceSwitcher.onSelect(workspace)}
-                      <div className="flex size-6 items-center justify-center rounded-sm border">
+                        className="gap-2 p-2 text-sm"
-                        <Building2 className="size-4 shrink-0" />
+                      >
-                      </div>
+                        <div className="flex size-6 items-center justify-center rounded-sm border">
-                      <span className="flex-1 truncate">{workspace.name}</span>
+                          {isDemo ? (
-                      {workspaceSwitcher.currentWorkspaceId === workspace.id && (
+                            <Sparkles className="size-4 shrink-0 text-purple-500" />
-                        <Check className="size-4 ml-auto" />
+                          ) : (
-                      )}
+                            <Building2 className="size-4 shrink-0" />
-                    </DropdownMenuItem>
+                          )}
-                  ))
+                        </div>
+                        <span className="flex-1 truncate">
+                          {workspace.name}
+                          {isDemo && (
+                            <span className="ml-2 text-xs text-muted-foreground">
+                              (Демо)
+                            </span>
+                          )}
+                        </span>
+                        {workspaceSwitcher.currentWorkspaceId === workspace.id && (
+                          <Check className="size-4 ml-auto" />
+                        )}
+                      </DropdownMenuItem>
+                    );
+                  })
                 ) : (
                   <div className="px-2 py-1.5 text-sm text-muted-foreground">
                     Нет доступных воркспейсов

components/providers/workspace-provider.tsx

@@ -20,7 +20,8 @@ import type {
   PermissionKey,
 } from "@/lib/types/api";
 import { STORAGE_KEYS } from "@/lib/utils/constants";
-import { isDemoWorkspace, demoApi, demoWorkspace, demoProjects } from "@/lib/demo";
+import { isDemoWorkspace, demoApi, demoWorkspace, demoProjects, DEMO_WORKSPACE_ID } from "@/lib/demo";
+import { useAuth } from "@/components/auth/auth-provider";
 
 // ============================================================================
 // Types
@@ -96,6 +97,7 @@ export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({
   const params = useParams();
   const router = useRouter();
   const pathname = usePathname();
+  const { user } = useAuth();
 
   // State
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
@@ -170,12 +172,25 @@ export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({
       setIsLoading(true);
       setError(null);
 
-      // Demo mode - use mock data
+      // Demo mode - use mock data, but also load real workspaces if user is logged in
       if (isDemoMode) {
-        setWorkspaces([demoWorkspace]);
+        const allWorkspaces: Workspace[] = [demoWorkspace];
+        
+        // If user is logged in, also load their real workspaces
+        if (user) {
+          try {
+            const response = await workspacesApi.list({ size: 100 });
+            allWorkspaces.push(...response.items);
+          } catch (err) {
+            // If loading real workspaces fails, just use demo workspace
+            console.warn("Failed to load real workspaces in demo mode:", err);
+          }
+        }
+        
+        setWorkspaces(allWorkspaces);
         setCurrentWorkspaceState(demoWorkspace);
         setIsLoading(false);
-        return [demoWorkspace];
+        return allWorkspaces;
       }
 
       const response = await workspacesApi.list({ size: 100 });
@@ -218,7 +233,7 @@ export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({
     } finally {
       setIsLoading(false);
     }
-  }, [workspaceIdFromUrl, pathname, router, isDemoMode]);
+  }, [workspaceIdFromUrl, pathname, router, isDemoMode, user]);
 
   // ============================================================================
   // Load Projects & Permissions

package.json

@@ -39,12 +39,12 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.553.0",
-    "next": "16.0.1",
+    "next": "16.0.10",
     "next-themes": "^0.4.6",
     "papaparse": "^5.5.3",
-    "react": "19.2.0",
+    "react": "19.2.3",
     "react-day-picker": "^9.11.1",
-    "react-dom": "19.2.0",
+    "react-dom": "19.2.3",
     "react-hook-form": "^7.66.0",
     "recharts": "2.15.4",
     "sonner": "^2.0.7",
@@ -60,7 +60,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "16.0.1",
+    "eslint-config-next": "16.0.10",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5"