feat: update analytics
This commit is contained in:
ivannoskov
638
components/analytics-filters-modal.tsx
Normal file
638
components/analytics-filters-modal.tsx
Normal file
@@ -0,0 +1,638 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Filter, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Project, Channel, Creative, CostType, PlacementType, InviteLinkType } from "@/lib/types/api";
|
||||
|
||||
interface AnalyticsFiltersModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onApply: (filters: PlacementsAnalyticsFilters) => void;
|
||||
projects: Project[];
|
||||
channels: Channel[];
|
||||
creatives: Creative[];
|
||||
initialFilters: PlacementsAnalyticsFilters;
|
||||
}
|
||||
|
||||
export interface PlacementsAnalyticsFilters {
|
||||
projectIds: string[];
|
||||
statusList: string[];
|
||||
placementChannelIds: string[];
|
||||
creativeIds: string[];
|
||||
costTypes: CostType[];
|
||||
placementTypes: PlacementType[];
|
||||
inviteLinkTypes: InviteLinkType[];
|
||||
costMin: number | null;
|
||||
costMax: number | null;
|
||||
viewsMin: number | null;
|
||||
viewsMax: number | null;
|
||||
subscriptionsMin: number | null;
|
||||
subscriptionsMax: number | null;
|
||||
cpmMin: number | null;
|
||||
cpmMax: number | null;
|
||||
channelTitleContains: string;
|
||||
creativeNameContains: string;
|
||||
commentContains: string;
|
||||
placementDateFrom: string;
|
||||
placementDateTo: string;
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
"Без статуса",
|
||||
"Написать",
|
||||
"Ждём ответа",
|
||||
"Согласование условий",
|
||||
"Оплатить",
|
||||
"Оплачено",
|
||||
"Отмена",
|
||||
"Не подходит цена",
|
||||
"Неактуально",
|
||||
"Не отвечает",
|
||||
];
|
||||
|
||||
const COST_TYPE_OPTIONS: { value: CostType; label: string }[] = [
|
||||
{ value: "fixed", label: "Фикс" },
|
||||
{ value: "cpm", label: "CPM" },
|
||||
];
|
||||
|
||||
const PLACEMENT_TYPE_OPTIONS: { value: PlacementType; label: string }[] = [
|
||||
{ value: "standard", label: "Стандартный" },
|
||||
{ value: "self_promo", label: "Взаимный пиар" },
|
||||
];
|
||||
|
||||
const INVITE_LINK_TYPE_OPTIONS: { value: InviteLinkType; label: string }[] = [
|
||||
{ value: "public", label: "Открытая" },
|
||||
{ value: "approval", label: "С заявками" },
|
||||
];
|
||||
|
||||
export function AnalyticsFiltersModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
onApply,
|
||||
projects,
|
||||
channels,
|
||||
creatives,
|
||||
initialFilters,
|
||||
}: AnalyticsFiltersModalProps) {
|
||||
const [filters, setFilters] = useState<PlacementsAnalyticsFilters>(initialFilters);
|
||||
const [activeTab, setActiveTab] = useState<"categories" | "numbers" | "text" | "dates">("categories");
|
||||
|
||||
const handleApply = () => {
|
||||
onApply(filters);
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
const defaultFilters: PlacementsAnalyticsFilters = {
|
||||
projectIds: [],
|
||||
statusList: [],
|
||||
placementChannelIds: [],
|
||||
creativeIds: [],
|
||||
costTypes: [],
|
||||
placementTypes: [],
|
||||
inviteLinkTypes: [],
|
||||
costMin: null,
|
||||
costMax: null,
|
||||
viewsMin: null,
|
||||
viewsMax: null,
|
||||
subscriptionsMin: null,
|
||||
subscriptionsMax: null,
|
||||
cpmMin: null,
|
||||
cpmMax: null,
|
||||
channelTitleContains: "",
|
||||
creativeNameContains: "",
|
||||
commentContains: "",
|
||||
placementDateFrom: "",
|
||||
placementDateTo: "",
|
||||
};
|
||||
setFilters(defaultFilters);
|
||||
};
|
||||
|
||||
const toggleArrayItem = <T extends string>(arr: T[], item: T): T[] => {
|
||||
return arr.includes(item) ? arr.filter((i) => i !== item) : [...arr, item];
|
||||
};
|
||||
|
||||
const hasActiveFilters =
|
||||
filters.projectIds.length > 0 ||
|
||||
filters.statusList.length > 0 ||
|
||||
filters.placementChannelIds.length > 0 ||
|
||||
filters.creativeIds.length > 0 ||
|
||||
filters.costTypes.length > 0 ||
|
||||
filters.placementTypes.length > 0 ||
|
||||
filters.inviteLinkTypes.length > 0 ||
|
||||
filters.costMin !== null ||
|
||||
filters.costMax !== null ||
|
||||
filters.viewsMin !== null ||
|
||||
filters.viewsMax !== null ||
|
||||
filters.subscriptionsMin !== null ||
|
||||
filters.subscriptionsMax !== null ||
|
||||
filters.cpmMin !== null ||
|
||||
filters.cpmMax !== null ||
|
||||
filters.channelTitleContains ||
|
||||
filters.creativeNameContains ||
|
||||
filters.commentContains ||
|
||||
filters.placementDateFrom ||
|
||||
filters.placementDateTo;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl max-h-[80vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Filter className="h-5 w-5" />
|
||||
Фильтры
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Настройте гибкие фильтры для таблицы размещений
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex border-b">
|
||||
{[
|
||||
{ id: "categories", label: "Категории" },
|
||||
{ id: "numbers", label: "Числовые" },
|
||||
{ id: "text", label: "Текст" },
|
||||
{ id: "dates", label: "Даты" },
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id as typeof activeTab)}
|
||||
className={cn(
|
||||
"px-4 py-2 text-sm font-medium border-b-2 transition-colors",
|
||||
activeTab === tab.id
|
||||
? "border-primary text-primary"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{activeTab === "categories" && (
|
||||
<div className="space-y-6">
|
||||
{/* Projects - Multi-select */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Проекты</Label>
|
||||
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
|
||||
{projects.map((project) => (
|
||||
<label
|
||||
key={project.id}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-1.5 rounded-md border cursor-pointer transition-colors text-sm",
|
||||
filters.projectIds.includes(project.id)
|
||||
? "bg-primary/10 border-primary text-primary"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={filters.projectIds.includes(project.id)}
|
||||
onCheckedChange={() =>
|
||||
setFilters({
|
||||
...filters,
|
||||
projectIds: toggleArrayItem(filters.projectIds, project.id),
|
||||
})
|
||||
}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="truncate max-w-[200px]">{project.title}</span>
|
||||
</label>
|
||||
))}
|
||||
{projects.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">Нет доступных проектов</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status - Multi-select */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Статусы</Label>
|
||||
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
|
||||
{STATUS_OPTIONS.map((status) => (
|
||||
<label
|
||||
key={status}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-1.5 rounded-md border cursor-pointer transition-colors text-sm",
|
||||
filters.statusList.includes(status)
|
||||
? "bg-primary/10 border-primary text-primary"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={filters.statusList.includes(status)}
|
||||
onCheckedChange={() =>
|
||||
setFilters({
|
||||
...filters,
|
||||
statusList: toggleArrayItem(filters.statusList, status),
|
||||
})
|
||||
}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="truncate max-w-[200px]">{status}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Channels - Multi-select */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Каналы размещения</Label>
|
||||
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
|
||||
{channels.map((channel) => (
|
||||
<label
|
||||
key={channel.id}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-1.5 rounded-md border cursor-pointer transition-colors text-sm",
|
||||
filters.placementChannelIds.includes(channel.id)
|
||||
? "bg-primary/10 border-primary text-primary"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={filters.placementChannelIds.includes(channel.id)}
|
||||
onCheckedChange={() =>
|
||||
setFilters({
|
||||
...filters,
|
||||
placementChannelIds: toggleArrayItem(filters.placementChannelIds, channel.id),
|
||||
})
|
||||
}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="truncate max-w-[200px]">{channel.title}</span>
|
||||
</label>
|
||||
))}
|
||||
{channels.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">Нет доступных каналов</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Creatives - Multi-select */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Креативы</Label>
|
||||
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
|
||||
{creatives.map((creative) => (
|
||||
<label
|
||||
key={creative.id}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-1.5 rounded-md border cursor-pointer transition-colors text-sm",
|
||||
filters.creativeIds.includes(creative.id)
|
||||
? "bg-primary/10 border-primary text-primary"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={filters.creativeIds.includes(creative.id)}
|
||||
onCheckedChange={() =>
|
||||
setFilters({
|
||||
...filters,
|
||||
creativeIds: toggleArrayItem(filters.creativeIds, creative.id),
|
||||
})
|
||||
}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="truncate max-w-[200px]">{creative.name}</span>
|
||||
</label>
|
||||
))}
|
||||
{creatives.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">Нет доступных креативов</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cost Type - Multi-select */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Формат оплаты</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{COST_TYPE_OPTIONS.map((opt) => (
|
||||
<label
|
||||
key={opt.value}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-1.5 rounded-md border cursor-pointer transition-colors text-sm",
|
||||
filters.costTypes.includes(opt.value)
|
||||
? "bg-primary/10 border-primary text-primary"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={filters.costTypes.includes(opt.value)}
|
||||
onCheckedChange={() =>
|
||||
setFilters({
|
||||
...filters,
|
||||
costTypes: toggleArrayItem(filters.costTypes, opt.value),
|
||||
})
|
||||
}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
{opt.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Placement Type - Multi-select */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Тип закупа</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{PLACEMENT_TYPE_OPTIONS.map((opt) => (
|
||||
<label
|
||||
key={opt.value}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-1.5 rounded-md border cursor-pointer transition-colors text-sm",
|
||||
filters.placementTypes.includes(opt.value)
|
||||
? "bg-primary/10 border-primary text-primary"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={filters.placementTypes.includes(opt.value)}
|
||||
onCheckedChange={() =>
|
||||
setFilters({
|
||||
...filters,
|
||||
placementTypes: toggleArrayItem(filters.placementTypes, opt.value),
|
||||
})
|
||||
}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
{opt.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invite Link Type - Multi-select */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Тип ссылки</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{INVITE_LINK_TYPE_OPTIONS.map((opt) => (
|
||||
<label
|
||||
key={opt.value}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-1.5 rounded-md border cursor-pointer transition-colors text-sm",
|
||||
filters.inviteLinkTypes.includes(opt.value)
|
||||
? "bg-primary/10 border-primary text-primary"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={filters.inviteLinkTypes.includes(opt.value)}
|
||||
onCheckedChange={() =>
|
||||
setFilters({
|
||||
...filters,
|
||||
inviteLinkTypes: toggleArrayItem(filters.inviteLinkTypes, opt.value),
|
||||
})
|
||||
}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
{opt.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "numbers" && (
|
||||
<div className="space-y-6">
|
||||
{/* Cost range */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Стоимость (₽)</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="от"
|
||||
className="h-9"
|
||||
value={filters.costMin ?? ""}
|
||||
onChange={(e) =>
|
||||
setFilters({
|
||||
...filters,
|
||||
costMin: e.target.value ? parseFloat(e.target.value) : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="text-muted-foreground">—</span>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="до"
|
||||
className="h-9"
|
||||
value={filters.costMax ?? ""}
|
||||
onChange={(e) =>
|
||||
setFilters({
|
||||
...filters,
|
||||
costMax: e.target.value ? parseFloat(e.target.value) : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Views range */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Просмотры</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="от"
|
||||
className="h-9"
|
||||
value={filters.viewsMin ?? ""}
|
||||
onChange={(e) =>
|
||||
setFilters({
|
||||
...filters,
|
||||
viewsMin: e.target.value ? parseInt(e.target.value) : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="text-muted-foreground">—</span>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="до"
|
||||
className="h-9"
|
||||
value={filters.viewsMax ?? ""}
|
||||
onChange={(e) =>
|
||||
setFilters({
|
||||
...filters,
|
||||
viewsMax: e.target.value ? parseInt(e.target.value) : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subscriptions range */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Подписки</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="от"
|
||||
className="h-9"
|
||||
value={filters.subscriptionsMin ?? ""}
|
||||
onChange={(e) =>
|
||||
setFilters({
|
||||
...filters,
|
||||
subscriptionsMin: e.target.value ? parseInt(e.target.value) : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="text-muted-foreground">—</span>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="до"
|
||||
className="h-9"
|
||||
value={filters.subscriptionsMax ?? ""}
|
||||
onChange={(e) =>
|
||||
setFilters({
|
||||
...filters,
|
||||
subscriptionsMax: e.target.value ? parseInt(e.target.value) : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CPM range */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">CPM (₽)</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="от"
|
||||
className="h-9"
|
||||
value={filters.cpmMin ?? ""}
|
||||
onChange={(e) =>
|
||||
setFilters({
|
||||
...filters,
|
||||
cpmMin: e.target.value ? parseFloat(e.target.value) : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="text-muted-foreground">—</span>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="до"
|
||||
className="h-9"
|
||||
value={filters.cpmMax ?? ""}
|
||||
onChange={(e) =>
|
||||
setFilters({
|
||||
...filters,
|
||||
cpmMax: e.target.value ? parseFloat(e.target.value) : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "text" && (
|
||||
<div className="space-y-6">
|
||||
{/* Channel title */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Название канала (содержит)</Label>
|
||||
<Input
|
||||
placeholder="Введите название канала"
|
||||
value={filters.channelTitleContains}
|
||||
onChange={(e) =>
|
||||
setFilters({ ...filters, channelTitleContains: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Creative name */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Название креатива (содержит)</Label>
|
||||
<Input
|
||||
placeholder="Введите название креатива"
|
||||
value={filters.creativeNameContains}
|
||||
onChange={(e) =>
|
||||
setFilters({ ...filters, creativeNameContains: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Comment */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Комментарий (содержит)</Label>
|
||||
<Input
|
||||
placeholder="Введите текст комментария"
|
||||
value={filters.commentContains}
|
||||
onChange={(e) =>
|
||||
setFilters({ ...filters, commentContains: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "dates" && (
|
||||
<div className="space-y-6">
|
||||
{/* Placement date range */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-sm font-medium">Дата размещения</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Input
|
||||
type="date"
|
||||
className="h-9"
|
||||
value={filters.placementDateFrom}
|
||||
onChange={(e) =>
|
||||
setFilters({ ...filters, placementDateFrom: e.target.value })
|
||||
}
|
||||
/>
|
||||
<span className="text-muted-foreground">—</span>
|
||||
<Input
|
||||
type="date"
|
||||
className="h-9"
|
||||
value={filters.placementDateTo}
|
||||
onChange={(e) =>
|
||||
setFilters({ ...filters, placementDateTo: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex justify-between">
|
||||
<Button variant="outline" onClick={handleReset}>
|
||||
Сбросить
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button onClick={handleApply}>
|
||||
Применить
|
||||
{hasActiveFilters && (
|
||||
<span className="ml-1 px-1.5 py-0.5 text-xs bg-primary-foreground/20 rounded">
|
||||
✓
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user