diff --git a/frontend/src/components/requests/RequestStatisticsPanel.tsx b/frontend/src/components/requests/RequestStatisticsPanel.tsx
new file mode 100644
index 00000000..ab51d889
--- /dev/null
+++ b/frontend/src/components/requests/RequestStatisticsPanel.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { SearchableSelectSingle } from "@/components/shared/SearchableSelect";
+import { apiClient } from "@/lib/api";
+import { displayUserName } from "@/lib/shared";
+import type { RequestEmployeeStatistics, User } from "@/types/api";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useState } from "react";
+
+const statsPeriods = [
+ { value: "all", label: "За всё время" },
+ { value: "year", label: "За год" },
+ { value: "month", label: "За месяц" },
+] as const;
+
+type StatsPeriod = (typeof statsPeriods)[number]["value"];
+
+type RequestStatisticsPanelProps = {
+ canView: boolean;
+ employees: User[];
+};
+
+export function RequestStatisticsPanel({
+ canView,
+ employees,
+}: RequestStatisticsPanelProps) {
+ const [open, setOpen] = useState(false);
+ const [employeeId, setEmployeeId] = useState
(null);
+ const [period, setPeriod] = useState("all");
+ const [stats, setStats] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (!canView || !open || !employeeId) {
+ return;
+ }
+
+ let cancelled = false;
+ setLoading(true);
+ setError(null);
+
+ apiClient.getEmployeeRequestStatistics(employeeId, period)
+ .then((response) => {
+ if (!cancelled) {
+ setStats(response);
+ }
+ })
+ .catch((err: unknown) => {
+ if (!cancelled) {
+ setError(err instanceof Error ? err.message : "Не удалось загрузить статистику.");
+ }
+ })
+ .finally(() => {
+ if (!cancelled) {
+ setLoading(false);
+ }
+ });
+
+ return () => {
+ cancelled = true;
+ };
+ }, [canView, employeeId, open, period]);
+
+ if (!canView) return null;
+
+ const employeeOptions = employees.map((employee) => ({
+ id: employee.id,
+ name: displayUserName(employee),
+ }));
+
+ const statsItems = stats ? [
+ { label: "Всего заявлений", value: stats.total_submitted_requests },
+ { label: "Больничных", value: stats.sick_leave_requests_count },
+ { label: "Отгулов", value: stats.day_off_requests_count },
+ { label: "Дней на больничном", value: stats.sick_leave_days },
+ { label: "Дней на отгулах", value: stats.day_off_days },
+ { label: "Оплачиваемый отпуск, дней", value: stats.paid_vacation_days },
+ { label: "За свой счёт, дней", value: stats.unpaid_vacation_days },
+ ] : [];
+
+ return (
+
+
+
+ {open ? (
+
+
+
{
+ setEmployeeId(id);
+ setStats(null);
+ setError(null);
+ }}
+ placeholder="Выберите сотрудника"
+ />
+
+
+ {statsPeriods.map((periodOption) => {
+ const isActive = period === periodOption.value;
+ return (
+
+ );
+ })}
+
+
+
+ {!employeeId ? (
+
+ Выберите сотрудника, чтобы посмотреть статистику.
+
+ ) : loading || (!stats && !error) ? (
+
+
+
Загрузка статистики...
+
+ ) : error ? (
+
+ {error}
+
+ ) : (
+
+
+ {period === "all"
+ ? "Период: за всё время"
+ : period === "year"
+ ? "Период: текущий календарный год"
+ : "Период: текущий календарный месяц"}
+
+
+ {statsItems.map((item) => (
+
+
{item.label}
+
{item.value}
+
+ ))}
+
+
+ )}
+
+ ) : null}
+