-
Отделы
- {(request.departments || []).length > 0 ? (
-
- {(request.departments || []).map((id) => (
-
- {departmentNameMap.get(Number(id)) || `Отдел #${id}`}
-
- ))}
-
- ) : (
-
Отделы не указаны
- )}
+
+
+
Отделы
+ {(request.departments || []).length > 0 ? (
+
+ {(request.departments || []).map((id) => (
+
+ {departmentNameMap.get(Number(id)) || `Отдел #${id}`}
+
+ ))}
+
+ ) : (
+
Отделы не указаны
+ )}
+
+
+
+
Получатели
+ {(request.recipients || []).length > 0 ? (
+
+ {(request.recipients || []).map((recipient) => (
+
+ ))}
+
+ ) : (
+
Получатели не указаны
+ )}
+
-
-
Получатели
- {(request.recipients || []).length > 0 ? (
-
- {(request.recipients || []).map((recipient) => (
-
- ))}
-
- ) : (
-
Получатели не указаны
- )}
-
+
+
+
В копии
+ {(request.cc_users || []).length > 0 ? (
+
+ {(request.cc_users || []).map((ccUser) => (
+
+ ))}
+
+ ) : (
+
Копия не указана
+ )}
+
-
-
В копии
- {(request.cc_users || []).length > 0 ? (
-
- {(request.cc_users || []).map((ccUser) => (
-
- ))}
-
- ) : (
-
Копия не указана
- )}
-
-
-
-
Вложение
- {attachmentUrl ? (
-
-
-
- Открыть в новой вкладке
-
-
- ) : (
-
Вложение отсутствует
- )}
+
+
Вложение
+ {attachmentUrl ? (
+
+
+
+ Открыть в новой вкладке
+
+
+ ) : (
+
Вложение отсутствует
+ )}
+
diff --git a/frontend/src/components/requests/RequestStatisticsPanel.tsx b/frontend/src/components/requests/RequestStatisticsPanel.tsx
new file mode 100644
index 00000000..21ae4759
--- /dev/null
+++ b/frontend/src/components/requests/RequestStatisticsPanel.tsx
@@ -0,0 +1,314 @@
+"use client";
+
+import { apiClient } from "@/lib/api";
+import { displayUserName } from "@/lib/shared";
+import { resolveMediaUrl } from "@/lib/url";
+import type { RequestEmployeeStatistics, User } from "@/types/api";
+import { ChevronDown, Search } from "lucide-react";
+import { useEffect, useState } from "react";
+
+const statsPeriods = [
+ { value: "all", label: "За всё время" },
+ { value: "year", label: "За год" },
+ { value: "month", label: "За месяц" },
+ { value: "custom", 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 [searchQuery, setSearchQuery] = useState("");
+ const [employeeId, setEmployeeId] = useState
(null);
+ const [period, setPeriod] = useState("all");
+ const [dateFrom, setDateFrom] = useState("");
+ const [dateTo, setDateTo] = useState("");
+ const [stats, setStats] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (
+ !canView
+ || !open
+ || !employeeId
+ || (period === "custom" && (!dateFrom || !dateTo))
+ ) {
+ return;
+ }
+
+ let cancelled = false;
+ setLoading(true);
+ setError(null);
+
+ const query = new URLSearchParams({
+ employee_id: String(employeeId),
+ period,
+ });
+ if (period === "custom") {
+ query.set("date_from", dateFrom);
+ query.set("date_to", dateTo);
+ }
+
+ apiClient.request(
+ `/api/v1/requests/statistics/?${query.toString()}`
+ )
+ .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, dateFrom, dateTo, employeeId, open, period]);
+
+ if (!canView) return null;
+
+ const filteredEmployees = employees.filter((employee) => {
+ const normalizedQuery = searchQuery.trim().toLowerCase();
+ if (!normalizedQuery) return true;
+
+ const haystack = [
+ displayUserName(employee),
+ employee.email || "",
+ ]
+ .join(" ")
+ .toLowerCase();
+
+ return haystack.includes(normalizedQuery);
+ });
+
+ 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 ? (
+
+
+
+
+ setSearchQuery(e.target.value)}
+ placeholder="Выберите сотрудника для статистики"
+ className="app-input w-full rounded-xl py-2.5 pl-10 pr-3 text-sm"
+ />
+
+
+
+ Найдено: {filteredEmployees.length}
+ Выбрано: {employeeId ? 1 : 0}
+
+
+
+ {filteredEmployees.length > 0 ? (
+ filteredEmployees.map((employee) => {
+ const isSelected = employee.id === employeeId;
+ const employeeName = displayUserName(employee);
+ return (
+
+ );
+ })
+ ) : (
+
Сотрудники не найдены
+ )}
+
+
+
+ {statsPeriods.map((periodOption) => {
+ const isActive = period === periodOption.value;
+ return (
+
+ );
+ })}
+
+
+ {period === "custom" ? (
+
+
+
+
+ ) : null}
+
+
+ {!employeeId ? (
+
+ Выберите сотрудника, чтобы посмотреть статистику.
+
+ ) : period === "custom" && (!dateFrom || !dateTo) ? (
+
+ Укажите даты начала и окончания для выбранного периода.
+
+ ) : loading || (!stats && !error) ? (
+
+
+
Загрузка статистики...
+
+ ) : error ? (
+
+ {error}
+
+ ) : (
+
+
+ {period === "all"
+ ? "Период: за всё время"
+ : period === "year"
+ ? "Период: текущий календарный год"
+ : period === "month"
+ ? "Период: текущий календарный месяц"
+ : `Период: ${stats?.date_from || dateFrom} — ${stats?.date_to || dateTo}`}
+
+
+ {statsItems.map((item) => (
+
+
{item.label}
+
{item.value}
+
+ ))}
+
+
+ )}
+
+ ) : null}
+