root/tgex-frontend
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: some ui updates

Browse Source
This commit is contained in:
ivannoskov
2026-01-07 15:46:30 +03:00
parent 3b6b97447b
commit 073be940b5
9 changed files with 840 additions and 722 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/dashboard/[workspaceId]/analytics/creatives/page.tsx
View File

@@ -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>

21
app/dashboard/[workspaceId]/creatives/page.tsx
View File

@@ -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>

110
app/dashboard/[workspaceId]/page.tsx
View File

@@ -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}
onSelect={(range) => setDateRange(range)}
selected={dateRange as any}
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 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} />
<XAxis dataKey="dateLabel" tickLine={false} axisLine={false} tickMargin={8} />
<BarChart accessibilityLayer data={subscriptionsChartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="dateLabel"
tickLine={false}
axisLine={false}
tickMargin={10}
/>
<YAxis tickLine={false} axisLine={false} tickMargin={8} />
<ReferenceLine y={0} stroke="#cbd5e1" />
<Bar
dataKey="value"
radius={[4, 4, 0, 0]}
label={false}
>
<ReferenceLine y={0} stroke="hsl(var(--border))" />
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel hideIndicator />}
/>
<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 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} />
<XAxis dataKey="dateLabel" tickLine={false} axisLine={false} tickMargin={8} />
<BarChart accessibilityLayer data={costChartData}>
<CartesianGrid vertical={false} />
<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={
<ChartTooltipContent
labelFormatter={(_, payload) => payload?.[0]?.payload?.date || ""}
formatter={(value: number) => [formatCurrency(value, 0), "Затраты"]}
/>
}
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<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 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} />
<XAxis dataKey="dateLabel" tickLine={false} axisLine={false} tickMargin={8} />
<BarChart accessibilityLayer data={cpfChartData}>
<CartesianGrid vertical={false} />
<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={
<ChartTooltipContent
labelFormatter={(_, payload) => payload?.[0]?.payload?.date || ""}
formatter={(value: number) => [formatCurrency(value, 2), "CPF"]}
/>
}
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<Bar dataKey="value" fill="var(--color-cpf)" radius={8} />
</BarChart>
</ChartContainer>
)}

6
components/layout/app-sidebar.tsx
View File

@@ -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),
}}
/>
)}

60
components/nav-main.tsx
View File

@@ -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}>
{item.icon && <item.icon />}
<Link href={item.url} className="flex items-center gap-2">
{item.icon && (
<item.icon
className={cn(
"h-4 w-4",
isActive &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>

47
components/nav-user.tsx
View File

@@ -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) => (
<DropdownMenuItem
key={workspace.id}
onClick={() => workspaceSwitcher.onSelect(workspace)}
className="gap-2 p-2 text-sm"
>
<div className="flex size-6 items-center justify-center rounded-sm border">
<Building2 className="size-4 shrink-0" />
</div>
<span className="flex-1 truncate">{workspace.name}</span>
{workspaceSwitcher.currentWorkspaceId === workspace.id && (
<Check className="size-4 ml-auto" />
)}
</DropdownMenuItem>
))
workspaceSwitcher.workspaces.map((workspace) => {
const isDemo = workspace.id === DEMO_WORKSPACE_ID;
return (
<DropdownMenuItem
key={workspace.id}
onClick={() => workspaceSwitcher.onSelect(workspace)}
className="gap-2 p-2 text-sm"
>
<div className="flex size-6 items-center justify-center rounded-sm border">
{isDemo ? (
<Sparkles className="size-4 shrink-0 text-purple-500" />
) : (
<Building2 className="size-4 shrink-0" />
)}
</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">
Нет доступных воркспейсов

25
components/providers/workspace-provider.tsx
View File

@@ -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

8
package.json
View File

@@ -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"

1264
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff