From 5da904fa8d9532e865550a14ffe587c4d8774e52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=B8=D0=BD?= <igor_26reg@mail.ru>
Date: Tue, 1 Sep 2026 15:43:21 +0300
Subject: [PATCH] Add payroll work profile section to employee profiles

---
 frontend/src/app/profile/page.tsx             |  3 ++
 .../finance/PayrollDailyWorkSection.tsx       | 29 ++++++++---
 .../EmployeePayrollWorkProfileSection.tsx     | 51 +++++++++++++++++++
 3 files changed, 75 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/users/EmployeePayrollWorkProfileSection.tsx

diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index 58217c88..bc05dc19 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -6,6 +6,7 @@ import { KeyRound, Mail, MessageCircle, Phone, RefreshCw } from "lucide-react";
 import { AppShell } from "@/components/AppShell";
 import EmployeeAttendanceCard from "@/components/attendance/EmployeeAttendanceCard";
 import EmployeeActionsTimeline from "@/components/users/EmployeeActionsTimeline";
+import EmployeePayrollWorkProfileSection from "@/components/users/EmployeePayrollWorkProfileSection";
 import EmployeeRequestsProfileSections from "@/components/users/EmployeeRequestsProfileSections";
 import {
   ProfileContactsPanel,
@@ -197,6 +198,8 @@ export default function ProfilePage() {
 
         <EmployeeRequestsProfileSections employeeId={user.id} />
 
+        <EmployeePayrollWorkProfileSection />
+
         <ProfileWorkScheduleCard
           canEdit={Boolean(user.auth?.is_staff || user.auth?.is_superuser)}
           employeeId={user.id}
diff --git a/frontend/src/components/finance/PayrollDailyWorkSection.tsx b/frontend/src/components/finance/PayrollDailyWorkSection.tsx
index 1b04d72f..03667d34 100644
--- a/frontend/src/components/finance/PayrollDailyWorkSection.tsx
+++ b/frontend/src/components/finance/PayrollDailyWorkSection.tsx
@@ -51,8 +51,10 @@ function currentEntryForDate(
 }
 
 export function PayrollDailyWorkSection({
+  embedded = false,
   periodSelectorTargetId,
 }: {
+  embedded?: boolean;
   periodSelectorTargetId?: string;
 }) {
   const [workspace, setWorkspace] = useState<PayrollOwnDailyWorkWorkspace | null>(null);
@@ -176,7 +178,7 @@ export function PayrollDailyWorkSection({
 
   if (loading && !workspace) {
     return (
-      <section className="app-surface flex min-h-64 items-center justify-center rounded-2xl">
+      <section className={`${embedded ? "app-surface-muted min-h-40 rounded-xl" : "app-surface min-h-64 rounded-2xl"} flex items-center justify-center`}>
         <Loader2 className="app-accent-text animate-spin" size={28} />
       </section>
     );
@@ -184,8 +186,8 @@ export function PayrollDailyWorkSection({
 
   if (!workspace?.periods.length) {
     return (
-      <section className="app-surface rounded-2xl p-5 sm:p-8">
-        <div className="app-surface-muted py-10 text-center">
+      <section className={`${embedded ? "app-surface-muted rounded-xl p-4" : "app-surface rounded-2xl p-5 sm:p-8"}`}>
+        <div className={`${embedded ? "py-6" : "app-surface-muted py-10"} text-center`}>
           <ClipboardList className="app-text-muted mx-auto" size={28} />
           <p className="app-text-muted mt-3 text-sm">Расчётные периоды пока не созданы.</p>
         </div>
@@ -211,11 +213,22 @@ export function PayrollDailyWorkSection({
   const periodSelectorTarget = periodSelectorTargetId && typeof document !== "undefined"
     ? document.getElementById(periodSelectorTargetId)
     : null;
+  const cardClassName = embedded
+    ? "app-surface-muted rounded-xl p-4"
+    : "app-surface rounded-2xl p-4 sm:p-5";
 
   return (
-    <div className="space-y-4">
-      {periodSelectorTarget ? createPortal(periodSelector, periodSelectorTarget) : null}
-      <section className="app-surface rounded-2xl p-4 sm:p-5">
+    <div className={embedded ? "space-y-3" : "space-y-4"}>
+      {periodSelectorTarget ? createPortal(periodSelector, periodSelectorTarget) : (
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="min-w-0">
+            <p className="text-sm font-semibold text-[var(--foreground)]">Дата выработки</p>
+            <p className="app-text-muted mt-0.5 text-xs">Выберите день нужного расчётного периода</p>
+          </div>
+          {periodSelector}
+        </div>
+      )}
+      <section className={cardClassName}>
         <form onSubmit={submit}>
           <div className="flex items-start gap-2">
             <CalendarDays className="app-accent-text" size={18} />
@@ -286,7 +299,7 @@ export function PayrollDailyWorkSection({
         </form>
       </section>
 
-      <section className="app-surface rounded-2xl p-4 sm:p-5">
+      <section className={cardClassName}>
         <div className="min-w-0">
           <p className="app-card-caption">Выработка</p>
           <h2 className="mt-1 text-lg font-semibold text-[var(--foreground)]">Ежедневные баллы</h2>
@@ -321,7 +334,7 @@ export function PayrollDailyWorkSection({
         ) : null}
       </section>
 
-      <section className="app-surface rounded-2xl p-4 sm:p-5">
+      <section className={cardClassName}>
         <div className="mb-4 flex items-center justify-between gap-3">
           <h2 className="text-base font-semibold text-[var(--foreground)]">Записи за период</h2>
           <span className="app-counter h-6 min-w-6 px-1.5 text-xs">{workspace.entries.length}</span>
diff --git a/frontend/src/components/users/EmployeePayrollWorkProfileSection.tsx b/frontend/src/components/users/EmployeePayrollWorkProfileSection.tsx
new file mode 100644
index 00000000..4be13347
--- /dev/null
+++ b/frontend/src/components/users/EmployeePayrollWorkProfileSection.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { ChevronDown, TrendingUp } from "lucide-react";
+import { useState } from "react";
+
+import { PayrollDailyWorkSection } from "@/components/finance/PayrollDailyWorkSection";
+
+export default function EmployeePayrollWorkProfileSection() {
+  const [open, setOpen] = useState(false);
+
+  const toggle = () => setOpen((current) => !current);
+
+  return (
+    <section className="app-surface rounded-2xl">
+      <div className="flex min-w-0 items-center gap-2 px-4 py-4 sm:px-5">
+        <button
+          type="button"
+          onClick={toggle}
+          aria-expanded={open}
+          className="flex min-w-0 flex-1 items-center gap-3 text-left"
+        >
+          <span className="app-icon-box flex h-9 w-9 shrink-0 items-center justify-center rounded-xl">
+            <TrendingUp size={18} />
+          </span>
+          <span className="min-w-0 flex-1 truncate text-sm font-semibold text-[var(--foreground)]">
+            Выработка
+          </span>
+        </button>
+
+        <button
+          type="button"
+          onClick={toggle}
+          aria-label={open ? "Свернуть раздел «Выработка»" : "Развернуть раздел «Выработка»"}
+          aria-expanded={open}
+          className="app-text-muted flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)]"
+        >
+          <ChevronDown
+            size={18}
+            className={`transition-transform ${open ? "rotate-180" : ""}`}
+          />
+        </button>
+      </div>
+
+      {open ? (
+        <div className="border-t border-[var(--border-subtle)] px-4 py-4 sm:px-5">
+          <PayrollDailyWorkSection embedded />
+        </div>
+      ) : null}
+    </section>
+  );
+}