Robotail/Corp
Robotail/Corp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add payroll work profile section to employee profiles

Browse Source
This commit is contained in:
admin i 2026-09-01 15:43:21 +03:00
parent 69c3ccc75b
commit 5da904fa8d
3 changed files with 75 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/profile/page.tsx
View File

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

29
frontend/src/components/finance/PayrollDailyWorkSection.tsx
View File

@ -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>

51
frontend/src/components/users/EmployeePayrollWorkProfileSection.tsx Normal file
View File

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