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>
)}